para mi tienda de comercio electrónico estoy haciendo una funcionalidad para agregar al carrito, así es como se ve la tienda:

el problema que tengo es que cuando hago clic en agregar al carrito, tengo una función de clic que toma el objeto del artículo y el tamaño seleccionado y primero actualiza el tamaño seleccionado y luego coloca el artículo en el carrito. La función se ve así.

 const [cart, setcart] = useState(''); // this is the state that i use to add the cart items into const handleAddtoCart=(item,selectedSize)=>{ let updatedItem=updateSelectedSize(item,selectedSize); // updated size setcart([...cart,updatedItem]) console.log(cart); } const updateSelectedSize=(item,selectedSize)=>{ item.size=selectedSize; return item; // function to update the selected size in the the item object }

este es el componente al que le paso la función de agregar a la tarjeta:

 <ShoeProductCard productData={productData} handleAddtoCart={handleAddtoCart} />

aquí está el componente al que se ha pasado la función onclick:

 `<i onClick={()=>{handleAddtoCart(product,selectedSize)}}className="fa-solid fa-cart-arrow-down"></i>`

ahora todo funciona bien, excepto por una cosa, la primera vez que se hace clic en el botón, esto es lo que inicia sesión en la consola:

ahora la segunda vez que hago clic obtengo los datos que necesito:

Sé que el problema está en el operador de propagación y el valor inicial del estado del carrito que hace que regrese vacío. Intenté establecer el estado inicial en diferentes valores, pero cualquier cosa menos una matriz vacía y comillas vacías parecen romper el código. Solo quiero una forma de almacenar cada vez que alguien hace clic en la función Agregar al carrito en la variable de estado del carrito.