экспорт useState из компонентов в другие компоненты

Question

Я новичок в React, и у меня есть проблема, я хотел бы получить цену (useState) моего компонента "Карты", чтобы использовать его в "Кошельке".

Но я не могу найти способ экспортировать его.

Это мой Cards.jsx

import React, { useState } from 'react';

const Cards = (props) => {

    const [stock, setStock] = useState(props.stock);
    const [price, setPrice] = useState(props.price);

    let buyOneUnit = () => {
        stock > 0 ? setStock(stock - 1) : setStock(0);
    }
    let toDisplayNone = () => {
        return stock === 0 ? "display_none" : ""
    }
    let toDisplay = () => {
        return stock > 0 ? "display_none" : ""
    }

    return (
        <section id={stock > 1 ? "cards" : stock <= 0 ? "cards_red" : "cards_yellow"}>
            <img src={props.img} />
            <h3>{props.name}</h3>
            <h4>{price}</h4>
            <p id={toDisplayNone()}>il reste {stock} produits</p>
            <p id={toDisplay()}>Il n'y a plus de stock !</p>
            <button onClick={buyOneUnit}>boire un {props.name}</button>
        </section>
    )
}

export default Cards;

Я пытался импортировать такую ​​цену, но она не работает.

Wallet.jsx

import React from 'react';
import { price } from "../components/Cards"

const Wallet = () => {

    return (
        <section>
            <h2>My wallet</h2>
            <p>my money : {price}</p>
        </section>
    )
}


export default Wallet;