Error: Typing on the input field of pick for each row just duplicates whatever value was entered in the qty field

Question

So I have this field where you can enter the quantity for each row. It was working, however, when I added another input field for the pick, it will just duplicate whatever was entered in either of the fields. How do I fix this? Any help would be appreciated.

adding into the cart items:

const handleAdd = (id, name, price, size, cat, color, quan = null, pick) => {
    console.log("add", id, name, price, size, cat, color, quan, pick);
    const productExist = cartItems.find(
      (item) => item.id === id && item.color === color
    );

    if (productExist) {
      setCartItems(
        cartItems.map((item) =>
          item.id === id && item.color === color
            ? {
                ...productExist,
                quantity:
                  quan === "" || quan ? quan : +productExist.quantity + 1
              }
            : item
        )
      );
    } else {
      setCartItems([
        ...cartItems,
        { id, name, price, size, cat, color, quantity: 1, pick }
      ]);
    }
  };

Answer 1

You have serval errors in your code.

1. First, you are not setting values in correct order when calling handleAdd method. That's why you are facing issues you have described in your question.

2. Second, there is no property in object item called prodName, it should be just name.

Here is working solution.