Problemas com react

Boa noite, estou fazendo um projeto pessoal com os ensinamentos dos cursos, mas cheguei em partes em que não estou conseguindo realizar corretamente. Nesse projeto temos a página Menu que mostra os produtos que podem ser adicionados no carrinho e ao clicar no botão do carrinho ,presente no card do produto, esse produto deve aparecer na página do carrinho do cliente. Segue algumas imagens: Menu:

import React, { useState } from 'react'
import styles from './Card.module.css'
import Botao from 'components/Botao'
import BotaoCarrinho from 'components/BotaoCarrinho'
import carrinhoJSON from 'jsons/carrinho'

function Card({ id, nome, preco, imagem, tag }) {
  const [carrinho, setCarrinho] = useState([carrinhoJSON])

  const adicionaAoCarrinho = () => {
    var novoItem = {
      'id': id,
      'nome': nome,
      'preco': preco,
      'imagem': imagem,
      'tag': tag
    }

    setCarrinho([...carrinho, novoItem])
  }


  return (
    <div className={styles.card__container}>
      <img className={styles.imagem} src={imagem} alt="Imagem do produto" />

      <h4>{nome}</h4>
      <h3>{`R$${preco}`}</h3>

      <div className={styles.botoes}>
        <Botao>Comprar</Botao>
        <BotaoCarrinho onClick={() => adicionaAoCarrinho}/>
      </div>
    </div>
  )
}

export default Card

Carrinho:

import Card from 'components/Card'
import React from 'react'
import itens from 'jsons/carrinho'

function Carrinho() {
  var pagina = itens === [] ? (
    <h2>Nenhum item adicionado ao carrinho</h2>
  ) : ( 
    <div>
        <h2>Itens no carrinho</h2>
        {itens.map(item => {
          return <Card
          id={item.id}
          nome={item.nome}
          preco={item.preco}
          imagem={item.imagem}
          tag={item.tag}
        />
        })}
    </div>
  )
  return (
    pagina
  )
}

export default Carrinho

CarrinhoJSON:

[

]

Não consigo fazer aparecer na página carrinho.