Mapping Errors | Next.js | Page 1

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>
      )}

📎 message.txt

#Mapping Errors