Así que tengo componentes funcionales aquí:

 export default function Test() { const [products, setProduct] = useState<any>([]); const [image, setImage] = useState<any>([""]); const [prices, setPrice] = useState<any>([]); const [showPrice, setShowPrice] = useState<boolean>(false); const [PhonePrice, setPhonePrice] = useState<any>(""); useEffect(() => { async function loadProducts() { const res = await fetch("http://raw.githubusercontent.com/reborn094/Practice/main/data.json", { method: "GET", }); const json = await res.json(); const data = json.products; setProduct(data); return ( <div> {products.map((product: any, index: number) => { return ( <Col> <Card key={index} style={{ width: "20rem" }}> <Card.Body> <Card.Title> </Card.Title> <Card.Title> <Child ProductImage={image[index]} name={product.name} code={product.code} onSelectProduct={()=>{ > what should I write here???? ------------------------ }} ></Child> </Card.Title> <Card.Text></Card.Text> </Card.Body> </Card> </Col> ); })} </div> ); }

Y aquí están mis componentes secundarios:

 export default function Child(props:{ onSelectProduct?:()=> void; }) { return ( <div> <Button onClick={props.onSelectProduct}></Button> </div> ) }

Mi pregunta es ¿Qué pasa si quiero configurar el botón en los componentes de prueba para apuntar a un solo elemento en la lista? ¿Qué debo hacer? Porque ahora, si configuro el botón, ese botón activará todos los elementos. ¿Qué debo hacer en la función en Seleccionar producto?