Как передать параметры между компонентами?

Подскажите как правильно передать значение в переменной(хука) в другой компонент(в Basket)?

Есть часть кода,

import React, { useState } from 'react';
import Array from '../myArray';
import './MainStyle.css';
import Basket from '../Basket/Basket';
const Main = () => {
    const [cartProduct, setCartProduct] = useState([]);
    const [listProducts] = useState(Array);

    const AddToBasket = (ID) => {
        // debugger
        const newCart = [...cartProduct, ID];
        const searchItem = newCart.find((item) => ID.id === item.id);
        if (searchItem) {
            searchItem.counter++;
        } else {
            searchItem = {
                ...ID,
                counter: 1
            }
            cartProduct.push(searchItem);
        }
        setCartProduct(newCart);
    }

    const itemList = listProducts.map((item) => {
        return (
            <div className="list-cart" key={item.id}>
                <img src={item.img} alt={item.name} />
                <h3>{item.name}</h3>
                <h4>{item.cost}</h4>
                <button onClick={() => AddToBasket(item)}>Add to cart</button>
            </div>
        )
    })
    
    return (
        <div className="content">
            <div className="block-content">
                <div className="block">{itemList}</div>
            </div>
            <Basket cartProduct={cartProduct} setCartProduct={setCartProduct} />
        </div>
    )
}
export default Main;

где выводиться товар на главной странице, под каждым товаром (карточки) есть кнопка "Добавить в корзину". При таком подходе, "Корзина" отображается под основным контентом, а мне нужно, чтоб при клике на "Корзина" в шапке сайте выводился товар именно в корзине. Вот здесь,

import React from 'react';
const Basket = ({ cartProduct, setCartProduct }) => {

    const showCart = cartProduct.map((item) => {
        return (
            <div className="list-cart1" key={item.id}>
                <img src={item.img} alt={item.name} />
                <h3>{item.name}</h3>
                <h4>{item.cost}</h4>
            </div>
        )
    })
    return (
        <div>
            <div className="basket">
                <div className="block">{showCart}</div>
            </div>

        </div>
    )
}
export default Basket;

При переходе на "Корзина", выбивает ошибку

TypeError: cartProduct is undefined

Вот остальной код,

import React from 'react';
import './App.css';
import Header from './Header/Header';
import Main from './Main/Main';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Basket from './Basket/Basket';
const App = () => {

  return (
    <Router>
      <Header />
      <Switch>
        <Route exact path ="/" component={Main}/>
        <Route path="/basket" component={Basket} />
      </Switch>
    </Router>
  );
}

export default App;

Header.jsx

import React from 'react';
import './HeaderStyle.css';
import { Link } from 'react-router-dom';
const Header = () => {
    return (
        <header className="header">
            <div>
                <ul>
                    <li><Link to="/">Main</Link></li>
                    <li><Link to="/basket">Basket</Link></li>
                </ul>
            </div>
        </header>
    )
}

export default Header;

Подскажите как передать правильно выбранный товар в корзину(в другой компонент)? Заранее спасибо!