Estoy creando una tienda de zapatillas donde tengo una función de agregar al carrito,

primero, cuando se hace clic en agregar al carrito, se actualiza el tamaño seleccionado, segundo, agrega el artículo modificado,

objeto en el carrito Indicar que el problema es que en el primer clic no se devuelve ningún objeto, pero

cada vez que después del primer clic devuelve los datos.

esta es la función que actualiza el tamaño:

 const updateSelectedSize=(item,selectedSize)=>{ item.size=selectedSize; return item; }

aquí está la función que uso para agregar el artículo actualizado al carrito:

 const handleAddtoCart=(item,selectedSize)=>{ const updatedItem=updateSelectedSize(item,selectedSize); let newitemArray=[...cart,updatedItem] setcart(newitemArray) console.log(cart); }

aquí está el componente que ejecuta la función al hacer clic:
<i onClick={()=>{handleAddtoCart(product,selectedSize)}}className="fa-solid fa-cart-arrow-down"></i>

aquí está el archivo console.log del primer clic:

y aquí está el registro de la consola del segundo clic:

como puede ver, no sucede nada en el primer clic, creo que esto tiene algo que ver con la variable del carrito useState y el operador de propagación, el valor inicial es:

 const [cart, setcart] = useState('');

Intenté establecer el valor en diferentes cosas, como una matriz vacía, pero siempre da el mismo resultado.