我有一些基于json文件呈现的产品卡片，通过点击“Add to Cart”按钮，元素应该被添加到数组сartList中，但这并没有发生。我也尝试将函数转发到组件本身，但效果不太好。
Shop.jsx:

import React, { useState } from 'react';
import './Instruments.css';
import Cart from '../components/Cart'
import Product from '../components/Product'
import cart from '../img/cart.png';
import data from "../data/data.json";

unction Shop() {
    const [value, setValue] = useState('');
    const [currentData, setCurrentData] = useState(data);
    const [cartList, setCartList] = useState([]);

    return (
            <div className='shop'>
                <div className='container'>
                        <div className='shop__main-products'>
                            {
                                currentData.filter((el) => {
                                    return value.toLowerCase() === '' ? el : el.title.toLowerCase().includes(value.toLowerCase())
                                }).map((el, index) => {
                                    return (
                                        <Product img={el.img} title={el.title} price={el.price} key={el.id} onClick={() => setCartList([...cartList, el])}/>
                                    )
                                })
                            }
                        </div>
                    </div>
                    <Cart active={modalActive} setActive={modalSetActive}/>
                </div>
            </div>
    );
}

export default Shop;

Product.jsx:

import React, { useState } from 'react';
import './Product.css';

function Product({img, title, price, id, type}) {
    return (
                <div className='product' key={id} type={type}>
                    <div className='buy__top'>
                        <div className='product__top-image-background'>
                            <img className='product__top-image' src={img}></img>
                        </div>
                        <h3 className='product__top-title'>{title}</h3>
                    </div>
                    <div className='product__buy'>
                        <h3 className='product__buy-price'>{price} грн</h3>
                        <button className='product__buy-button'>В корзину</button>
                    </div>
                </div>
            )
}

export default Product;