Why mapped items states are affecting on each other in React? - reactjs

Question

I mapped an array of products, each of them have, I am managing state with redux, each mapped item has quantity if I increase quantity, price should also increase, so when I am changing quantity of one item second array price also changes based on previous item quantity, so why are different items affecting on each other? here is the code:
const handleProductQuantity = (event) => {
dispatch(setProductQuantity(event.target.value));
}
<div className='cart'>
<div className='products-in-cart-wrapper'>
{ productsInCart ? (
productsInCart.map(productInCart => (
<div className='product-in-cart'>
<div className="product-in-cart-name">
<div className="label label-title">
Title:
</div>
<div className="value value-title">
{productInCart.title}
</div>
</div>
<div className="product-in-cart-price">
<div className="label label-price">
Price:
</div>
<div className="value value-price">
{productQuantity * productInCart.price}
</div>
</div>
<div className="product-in-cart-price">
<div className="label label-price">
Quantity:
</div>
<div className="value value-quantity">
<input onChange={handleProductQuantity} type="number" placeholder='1'/>
</div>
</div>
<div className="button-cont">
<button className="buy-button" onClick={test}>
Buy now
</button>
</div>
</div>
))
) : (
<div> Loading... </div>
)
}
<div className="total-price-button-cont">
<button>Buy all for: 100$</button>
</div>
</div>
</div>

Answer 1

You should always use a key prop on items inside array. if you have an id by example, this would look like that :
<div className="product-in-cart" key={productInCart.id}>...</div>
React uses key to properly identify items inside the array. You problem might be different tho but you should always uses key
edit: productQuantity should be productInCart.productQuantity ;)