Uma coisa que me passou despercebido foi que ao importar o usaState voce coloca carrinho e setCarrinho dentro de um array e nao dentro de chaves como é de costume.. voce colocou os dois dentro de um array por o valor inicial era um array vazio certo?
Pois estava dando erro ao adicionar um item, e o valor inicial do carrinho no React Context estava diferente também..
No react nós realmente desestruturamos os valores de um useState usando um Array. Isso se dá pois o useState é o que chamamos de "Tupla", ele possui uma quantidade de valores definidos e já existentes.
E são eles: [valor, setarValor], o que lembra a lógica de um "getter" e "setter".
Aqui está um exemplo de uso de um useState
function myComponent() {
const [contador, setContador] = useState(0);
return (
<div>
<button onClick={() => setContador(contador + 1}>
Aumentar
</button>
<p>{contador}</p>
</div>
)
}Como pode ver, o setter está aumentando a contagem quando o botão e clicado, e o getter está mostrando o estado do contador num parágrafo. O primeiro valor do array pega o estado e o segundo o modifica.