[Dúvida] Como reutilizar dados de um componente em outro

Alguém pode me orientar o que fazer ? Estou preso no meu código já faz um tempinho...

Meu objetivo é pegar os dados de cada item criado no setSelectedItem e usar na lista dentro do componente ShoppingCartComponent. Agradeço a quem pode me ajudar kk.

Componente ShoppingCartComponent

export const ShoppingCartComponent = ({ selectedItem, onClose }) => {
    const ref = useRef(null)

    const handleCloseClick = () => {
        closeAnimation(ref.current, 200, onClose)
    }

    useEffect(() => {
        animateElements(ref.current, 200, 0)

        const handleClickOutside = (event) => {
            if (ref.current && !ref.current.contains(event.target)) {
                handleCloseClick()
            }
        }

        document.addEventListener('mousedown', handleClickOutside)

        return () => {
            document.removeEventListener('mousedown', handleClickOutside)
        }
    }, [onClose])

    return (
        <>
            <ModalOverlay />

            <aside className='shopping-cart-menu' ref={ref}>
                <section>
                    <header>
                        <IoIosClose onClick={handleCloseClick} className='icon-close' />
                    </header>

                    <nav>
                        <ul>
                            {selectedItem && selectedItem ? (
                                <li key={selectedItem.id}>
                                    <img className="image" src={selectedItem.image} alt={`Imagem ${selectedItem.title}`} />
                                    <p>{selectedItem.title}</p>
                                    <p>{selectedItem.description}</p>
                                    <p>{selectedItem.price}</p>
                                </li>
                            ) : (
                                <li> Carrinho vazio </li>
                            )}
                        </ul>
                    </nav>
                </section>
            </aside>
        </>
    )
}

Componente CardMenu

export const CardMenu = ({ data }) => {
    const [selectedItem, setSelectedItem] = useState(null)
    const [showModal, setShowModal] = useState(false)

    const handleClickBuy = (item) => {
        setSelectedItem(item)
        console.log(item)
    }

    const handleClickMoreInformation = (item) => {
        setSelectedItem(item)
        setShowModal(true)
    }

    const clickCloseModal = () => {
        setShowModal(false)
    }

    return (
        <>
            <ul className="menu-list">
                {data && data.map((item) => {
                    return (
                        <li className="item" key={item.id}>
                            <div className='leftSide'>
                                <div className='topSide'>
                                    <img className="image" src={item.image} alt={`Imagem ${item.title}`}/>
                                    <h2 className="title"> {item.title} </h2>
                                </div>
                                <div className='bottomSide'>
                                    <p className="description"> {item.description} </p>

                                    <div className='value'>
                                        <Button size='s' onClick={() => handleClickBuy(item)}>
                                            <CiShoppingCart className='icon-button' />
                                        </Button>
                                        <p className="price"> {currencyFormat(item.price)} </p>
                                        <button className='more-information'>
                                            <p className='text-more-information' onClick={() => handleClickMoreInformation(item)}> Mais informações</p>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div className="rightSide">
                                <img src={radiationIcon} alt='imagem ilustrativa de aviso nuclear' className='radiationImage'></img>
                                <img src={vaultBoy} alt='ilustração de um garoto de fallout (vault boy)' className='vaultBoyImage'></img>
                            </div>
                        </li>
                    )
                })}
            </ul>

            {showModal && <MenuModal item={selectedItem} onClose={ clickCloseModal } />}
        </>
    )
}