When i try to map items from a string[] of items from firestore , only the first item gets its tailwind styling applied, the others don't.
app-index.js:31 Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
app-index.js:31 Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>.
app-index.js:31 Warning: validateDOMNesting(...): <ul> cannot appear as a descendant of <p>.
app-index.js:31 Warning: Each child in a list should have a unique "key" prop.

All these errors shoudn't occur

{order && productInfo && ( <ul> {productInfo.map((product, index) => ( <li className="flex mt-5" key={index}> <div> <img src={product.mainImage} className="w-20" alt={product.name} /> </div> <div className="mx-auto"> <p className="text-3xl">{product.name}</p> <p className="text-2xl">{product.price} лв.</p> </div> </li> ))} </ul> )}