Quiero hacer un contador onClick pero tengo un problema con el contador iterando correctamente. En la aplicación hay 3 "productos" y después de hacer clic en el botón "Agregar al carrito", el estado del objeto se actualiza pero todos los productos se generan por separado. Creo que ese es el problema de que el contador es diferente para cada uno de los productos o todo funcionará correctamente si levanto el estado, pero el archivo console.log se genera recientemente para todos los productos. No estoy muy seguro, así que necesito ayuda con eso.
Aquí hay un código en el orden del padre al último hijo :

 import { useEffect, useState } from "react"; import ProductList from "./ProductList"; const Products = () => { const [products, setProducts] = useState (null); useEffect (() => { fetch('http://localhost:8000/products') .then(res => { return res.json(); }) .then(data => { setProducts(data); }) }, []); return ( <div className="ProductList"> {products && <ProductList products={products}/>} </div> ); } export default Products;

 import Card from "./Card"; const ProductList = (props) => { const products = props.products; return ( <div className="ProductList" > {products.map((product) => ( <Card product={product} key={product.id} />))} </div> ); } export default ProductList;

 import { useState } from "react"; const Card= ({ product }) => { const [showDescription, setShowDescription] = useState(false); const [CartCounter, setCartCounter ] = useState(0); console.log(CartCounter); return ( <div className="Product-Preview" > <div className="backdrop" style={{ backgroundImage: `url(${product.image})` }}></div> <h2>{product.title}</h2> <div>{product.price}</div> <button className="ShowDescription" onClick={() => setShowDescription(!showDescription)}>Details</button> <button className="AddToCart" onClick={() => setCartCounter(CartCounter + 1)}>Add To Cart </button> {showDescription && <p>{product.description}</p>} <br /> </div> ); }; export default Card;