Передать данные из одного компонента в другой

Пишу проект - интернет магазин кроссовок. У меня есть компонент шапки, и компонент карточки, я хочу, чтобы при нажатии на "+" в компоненте карточки, у меня менялась цена в шапке. Как проверить какая именно карточка была нажата и передать цену в компонент шапки?

Код карточки:

import styles from './Cart.module.scss'


function Cart({onClickClose, items = []}) {
    let totalPrice = 0;

    items.map(item => {
        totalPrice += item.price;
    });

    return (
        <div className={styles.overlay}>
            <div className={styles.cart}>
                <h2 className={"mb-30 d-flex justify-between"}>Корзина <img className={styles.deleteItem}
                                                                            src="images/deleteCart.svg"
                                                                            onClick={onClickClose}/></h2>
                <div className={styles.Items}>
                    {
                        items.map(item => (
                                <div className={styles.cartItem}>
                                    <img className="mr-20" width={133} height={112} src={item.img}/>
                                    <div className="mr-20">
                                        <p className="sneakers-info mb-5">{item.title}</p>
                                        <b>{item.price} Руб.</b>
                                    </div>
                                    <img className={styles.deleteItem} src="images/deleteCart.svg"/>
                                </div>
                            )
                        )
                    }
                </div>

                <div className={styles.cardTotalBlock}>
                    <ul>
                        <li>
                            <span>Итого</span>
                            <div></div>
                            <b>{totalPrice} руб.</b>
                        </li>
                        <li>
                            <span>Налог 5%</span>
                            <div></div>
                            <b>{totalPrice / 100 * 5} руб.</b>
                        </li>
                    </ul>
                    <button className={styles.greenButton}>Оформить заказ <img src={"images/arrow.svg"}/></button>
                </div>
            </div>
        </div>
    )
}

export default Cart;

Код Header:

import React from "react";

function Header(props) {
    return(
        <header className="d-flex justify-between align-center p-40">
            <div className="headerLeft d-flex align-center">
                <img width={40} height={40} src="/images/logo.png"/>
                <div className="headerInfo">
                    <h3 className="text-uppercase">React sneakers</h3>
                    <p>Топовый магазин кросс</p>
                </div>
            </div>
            <div>
                <ul className="d-flex">
                    <li className="mr-30 cu-p" onClick={props.onClickCart}>
                        <img style={{cursor: "pointer"}} width={18} height={18} src="images/cart.svg"/>
                        <span> 12000 руб.</span>
                    </li>
                    <li>
                        <img width={18} height={18} src="images/user.svg"/>
                    </li>
                </ul>
            </div>
        </header>
    )
}

export default Header;

То есть чтобы вместо статичных 12000 цена менялась динамически, в зависимости от общей стоимости кроссовок, добавленных в корзину.

Код App.js

import React from 'react'
import Card from './components/Card/'
import Cart from './components/Cart/'
import Header from './components/Header'
import axios from "axios";

function App() {
    const [items, setItems] = React.useState([]);
    const [cartItems, setCartItems] = React.useState([]);
    const [cartOpened, setCartOpened] = React.useState(false);
    const onAdd = (obj) => {
        setCartItems(prev => [...prev, obj]);
    }

    React.useEffect(() => {
        axios.get('https://6128cd040e3482001777b180.mockapi.io/items').then(res => {
            setItems(res.data);
        })
    }, []);
    return (
        <div className="wrapper clear">
            {cartOpened && <Cart
                onClickClose={() => {
                    setCartOpened(false)
                }}
                items={cartItems}
            />}
            <Header onClickCart={() => {
                setCartOpened(true)
            }}/>
            <div className="content p-40">
                <div className="d-flex align-center justify-between mb-40">
                    <h1>Все кроссовки</h1>
                    <div className="search-block d-flex">
                        <img width={13} height={45} alt="Search" src="images/search.svg"/>
                        <input placeholder="Поиск"/>
                    </div>
                </div>
                <div className="d-flex flex-wrap">
                    {
                        items.map(item => (
                            <Card
                                title={item.name}
                                price={item.price}
                                img={item.img}
                                onClickFavorite={() => alert("Добавлено в любимое")}
                                onPlus={(obj) => onAdd(obj)}
                            />
                        ))
                    }
                </div>
            </div>
        </div>
    );
}

export default App;