Estoy tratando de almacenar la identificación de cada producto en los elementos del carrito, sin embargo, la identificación se guarda como una matriz, como se muestra en la imagen a continuación. En lugar de guardarse como esta id: "aRLMZkiSU7T0lcsPCSsV"

¿Cómo puedo solucionar esto?

zona de pruebas de código: https://codesandbox.io/s/add-to-cart-jsd9fd?file=/src/App.js:0-2587

A continuación se muestran los códigos:

 export default function App() { const [cartItems, setCartItems] = useState([]); const handleAdd = (id, name, size, cat, color) => { console.log("add", id, name, size, cat, color); const productExist = cartItems.find((item) => item.id === id); if (productExist) { setCartItems( cartItems.map((item) => item.id === id ? { ...productExist, quantity: productExist.quantity + 1 } : item ) ); } else { setCartItems([ ...cartItems, { ...id, name, size, cat, color, quantity: 1 } ]); } }; // const handleAdd = (item) => { // console.log("add", item); // }; console.log(cartItems); return ( <div className="App"> {products.map((index) => ( <ul key={index.id}> <li> <b>{index.prodName}</b> </li> <li>Category: {index.cat}</li> <li>Size: {index.size}</li> {Object.entries(index.colorMap).map((color) => ( <> {color[1] !== 0 ? ( <> {color[0]} <button onClick={(e) => handleAdd( index.id, index.prodName, index.size, index.cat, color[0] ) } > Add to Cart </button> {/* <button onClick={(e) => handleAdd(index)}>Add to Cart</button> */} </> ) : ( <>2</> )} <br /> </> ))} Php {index.price}.00 </ul> ))} {/* <Cart cartItems={cartItems} /> */} </div> ); }