React. Как осуществить добавление товара в корзину?

Нужно реализовать на реактe добавление карточек товаров в корзину и в корзине осуществить подсчет общей суммы и функцию удаления товаров из нее при необходимости.

Пока не совсем понимаю, как это можно осуществить с помощью функционального подхода и Гугл мне к сожалению ничего толкового не выдал. Поэтому буду рада, если кто-нибудь сможет помочь.

Вот мой код:

App.js:

import './App.css';

import Products from './Pages/Products'

import Basket from './Pages/Basket'

import NotFound from './Pages/NotFound'

function App() {
  return (
<>
<div className = "products">
       <Products />
    </div>
    <div className = "basket">
    <Basket />
 </div></>
    
  );
}

export default App;

Products.js

import Card from '../components/elements/card.js';
import { products } from '../products';
import './Products.css'
import React, { useState } from 'react';
//импорт React router DOM
import { Link } from 'react-router-dom';
import Basket from './Basket';


//Функциональный компанент Products
function Products () {

  //хук для подсчета суммы цен
  const [productsSum, setProductsSum]=useState(0);

  //хук для подсчета количества добавленных товаров
  const [countsSum, setCountsSum]=useState(0);


  //функция 
  const addProduct = (price) => {
    setProductsSum(productsSum => productsSum + parseInt(price));
    setCountsSum(countsSum => countsSum + 1);
  }

  const [addCard, setAddCard]=useState([])

  useEffect (()=>{
    fetch('{products}')
    .then(response => response.json())
    .then(data => setAddCard(data))
  }, [])

    return (
    <main className = "main">
     <div className = "container">
       <header className = "header">
         <h1>наша продукция</h1>
         <div className = "basketArea">
           <div calssName = "total">
              {countsSum} товара на сумму {productsSum} &#8381;</div>
              <Link to="./Basket" className = "link"><img src= "/Group 71.png"></img></Link>
         </div>
       </header>

       <div className = "menu">
              {products.map(key => {
                     const {url, title, description, price, weight} = key;
                     return(
                            <Card 
                            url={url} 
                            title = {title} 
                            description={description} 
                            price={price} 
                            weight={weight} 
                            handleClick = {() => addProduct(price)}
                            />
                     )
              })}
       </div>
       
     </div>
    </main>
  );
}

export default Products;

Basket.js:

import {products} from '../products';
import './Basket.css'
import CardBasket from '../components/elements/card-basket.js'
//import './Products.css'
import Products from './Products';
import { Link } from 'react-router-dom';

function Basket () {
    
  return (
    <main className = "main-basket">
     <div className = "container-basket">
       <header className = "header-basket">
         <Link to="./Products" className = "header-basket__returnLink">
          <img src = "./Group 64.png"></img> </Link>
         <h1>Корзина с выбранными товарами</h1>
       </header>

       <div className = "menu-basket">
              {products.map(key => {
                     const {url, title, description, price, weight} = key;
                     return(
                            <CardBasket
                            url={url} 
                            title = {title} 
                            description={description} 
                            price={price} 
                            weight={weight} />
                     )
              })}
         
       </div>
       <div className = "line"></div>
       <footer className = "footer-basket">
         <h2 className = "footer-basket__header">Заказ на сумму: {} </h2>
         <button className = "footer-basket__btn">Оформить заказ</button>
       </footer>
     </div>
    </main>
  );
}

export default Basket;

card.js:

import './card.css';


function Card({url, title, description, price, weight, handleClick}) {
    return (
      <div className = "card">
        <img className = "card__preview" src={url} alt = "" />
        
        <h2 className = "card__title">{title}</h2>

        <p className = "card__description">{description}</p>
      
        <div className = "card__price">
          {price} Р/ {weight}
          <button className = "card__card-add-btn" onClick={handleClick}>
          +
        </button>
        </div>
      </div>
    );
  }
  
  export default Card;

card-basket.js:

function BCard({url, title, price, weight}) {
    return (
      <div className = "bcard">
        <img className = "bcard__preview" src={url} alt = "" />
        
        <h2 className = "bcard__title">{title}</h2>
      
        <div className = "bcard__price">
          {price} Р
          <button className = "bcard__add">
          +
        </button>
        </div>
      </div>
    );
  }
  
  export default BCard;