Добавление товара в Корзину в React

Всем привет. Работаю над не большим интернет магазином. Застрял в реализации корзины. У меня есть js файл самого продукта

import React, { Component} from 'react';
import ProductsItems from '../ProductsItems';
import Loader from '../../UI/Loader/Loader';
import './Soap.scss';
import soap from './img/soap.jpg';
import heart from './img/like.svg';
import heartRed from './img/liked.svg';


function loaderSpinner(){
   return new Promise((resolve) => setTimeout(() => resolve(), 1500));
}

class Soap extends Component{
  state = {
    item: [
        {
            cls: 'soap',
            img: soap,
            productName: 'Жидкое мыло турецкое',
            price: 200,
            heart: heart,
            qty: 1
        },
        {
            cls: 'soap',
            img: soap,
            productName: 'Жидкое мыло ТМ',
            price: 200,
            heart: heart,
            qty: 1
        },
    ],
    loader: true,
};


addToCart = product => {
    
}

componentDidMount(){
    loaderSpinner().then(() => this.setState({loader: false}));
}

handleClick = index => {
    this.setState(prevState => prevState.item[index].heart = heartRed);
}
render(){
    const {loader} = this.state;

    if(loader) { 
        return <Loader/>;
    }

    return(
        <div className="soap">
            <div className="container">
                <h1 className="soap__title">Мыло</h1>
                <div className="soap__wrapper">
                    {
                        this.state.item.map((item, index) => {
                            return (
                                <div key={index} className="soap__items">
                                    <ProductsItems
                                        addToCart={this.handleAddToCart}
                                        liked={() => this.handleClick(index)}
                                        cls={item.cls}
                                        img={item.img}
                                        productName={item.productName}
                                        price={item.price}
                                        heart={item.heart} />
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        </div>
        )
   }
   }
  export default Soap;

Сама корзина находится в другом js файле.

import React, { Component } from 'react';
 import './Cart.scss';
 import Loader from '../../components/UI/Loader/Loader';

 function loaderSpinner(){
  return new Promise((resolve) => setTimeout(() => resolve(), 1500));
}


class Cart extends Component{
state = {
    loader: true
};

componentDidMount(){
    loaderSpinner().then(() => this.setState({loader: false}));
}


render(){
    const {loader} = this.state;

    if(loader) { 
        return <Loader/>;
    }
    
    return(
        <div className="cart">
            <div className="container">
                <h1>Корзина</h1>
                <p>Название товара</>
                 <p>Цена товара</>
            </div>
        </div>
    )
}
}

export default Cart;

Как можно реализовать корзину. Нужно ли использовать хуки или Redux?