How to remove item correctly from an array in react?

I got 2 component in my project.

Cart List and Cart Item in my project

In the cart list I got something like this.

const examCartItemList = [
    {
        name: 'Mocasines Pastoret 01',
        description: 'Leather Loafer with Penny Bar',
    },
    {
        name: 'Mocasines Pastoret 02',
        description: 'Leather Loafer with Penny Bar',
    },
    {
        name: 'Mocasines Pastoret 03',
        description: 'Leather Loafer with Penny Bar',
    },
];


const CartList = ({navigation}) => {
    const [itemList, setItemList] = useState(examCartItemList);

    const removeItem = name => {
        const filteredArray = itemList.filter(item => item.name !== name);
        setItemList(filteredArray);
    };

return (

<View style={[styles.pageContainer]}>
                    {itemList.map((cartItem, index) => (
                        <CartItem
                            removeItem={removeItem}
                            index={index}
                            key={index.toString()}
                            cartItem={cartItem}
                        />
                    ))}
                </View>
)

I am passing the removeItem func into the child component. Since I add the remove button in the cartItem component.

From my understanding the function will remove the item that I selected. Which is working fine.

The thing is the number of cart item coming from child component is behaving strangely

In my child component

I got something like this

const CartItem = ({cartItem, removeItem, index}) => {
  const [productCount, setProductCount] = useState(1);

  const decreaseProductCount = () => {
    if (productCount > 1) {
      setProductCount(productCount - 1);
    }
  };

  return (
    <View style={styles.componentContainer}>
      <View>
        <Image style={styles.componentImage} source={cartItem.source} />
      </View>
      <View style={styles.componentContent}>
        <View style={styles.cartItemNameContainer}>
          <Text style={[styles.nameText, styles.textDescription]}>
            {cartItem.name}
          </Text>
          <TouchableOpacity onPress={() => removeItem(cartItem.name)}>
            <Text style={globalStyle.normalText}>X</Text>
          </TouchableOpacity>
        </View> 
   </View> 
</View>

What happening is that as you can see in the pic. if the remove the item with name 01. The item 01 its self is removed but the child number of count is removed differently from the parent. if I remove item 01 the count 3 should be removed but the count 7 is remove instead

Here is the pic

Original

After removing

Answer

I think that the problem is because you are assigning the id value as the current index of the map operation. When you remove item 0, in the next render item 0 still exists. I think you must assign a static id to each cart item, just like this:

const examCartItemList = [
     {
         id: 1,
         name: 'Mocasines Pastoret 01',
         description: 'Leather Loafer with Penny Bar',
     },
     {
         id: 2,
         name: 'Mocasines Pastoret 02',
         description: 'Leather Loafer with Penny Bar',
     },
     {
         id: 3,
         name: 'Mocasines Pastoret 03',
         description: 'Leather Loafer with Penny Bar',
     },
];

Also, it’s a good practice to remove item by id, so maybe you can reconsider to change the removeItem logic to remove item by id.