Olá, sou iniciante na programação. Estou desenvolvendo um site e-commerce usando o React. Minha dúvida é a seguinte … Criei uma página com os produtos que o usuário marcou como favorito. Nesta página eu estou mapeando os produtos do meu banco de dados.

productstate.map((item, index) => ({
return(
<div className=“container”>
<img src=“product.img”/>


<p className=“brand”>{item.brand}</p>

<p className=“title”>{item.title}</p>

<p className=“description”>{item.description}</p>

<p className=“price”>{item.price}</p>

<input
type=“number”
placeholder=“Quantidade”
onChange={(e) => setQuantity(e.target.value)

<button 
type=“submit”>
Add To Cart
<button>

</div> 
)
})

Esse é o formulário, tenho somente um campo de entrada onde eu preciso passar a quantidade que o usuário quer adicionar ao carrinho. Até ai, tudo funciona perfeitamente. Nesse momento tenho dois itens na aba favoritos, em tela está sendo renderizados dois inputs e dois buttons os dois funcionam corretamente. No entanto se eu setar uma quantidade por exemplo 2 no índex 0 e clicar no butron add to cart do índex 1 e o input quantidade do índex 1 estiver com qualquer valor ele enviará os valores errados para o carrinho de compras, pois o setQuantity() foi atualizado por ultimo.
Existe algum modo que possa impedir esse comportamento? Se minha explicação ficou confusa peço desculpas, mas não encontrei uma maneira melhor de simplificar