UseContext not iterating - reactjs

Question

I'm trying to reach a value using React Hook useContext, but keep getting the following error:
TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
CartContext.js
import React, {useState, createContext} from 'react';
export const CartContext = createContext();
export const CartProvider = (props) => {
const [cart, setCart] = useState([]);
return (
<CartContext.Provider value={[cart, setCart]}>
{props.children}
</CartContext.Provider>
)
}
And im trying to reach it from Cart.js
import React, {useContext} from 'react'
import {CartContext} from '../../pages/contact/CartContext';
import { slide as Menu } from 'react-burger-menu'
import './Cart.css'
export default function Cart() {
const [cart, setCart] = useContext(CartContext); //This line causes the error
return (
<div>
<Menu right width={350}
isOpen={false}
id={"testi"} className={ "my-menu" }
customBurgerIcon={<i className="fa fa-shopping-cart" aria-hidden="true"/>}
burgerButtonClassName={ "cartButton" }>
<h1>Hello</h1>
</Menu>
</div>
)
}

Answer 1

It seems alright. See this CodeSandbox:
https://codesandbox.io/s/eager-brattain-2zhxj
index.js
import React from "react";
import ReactDOM from "react-dom";
import Cart from "./Cart";
import { CartProvider } from "./CartContext";
import "./styles.css";
function App() {
return (
<CartProvider>
<Cart />
</CartProvider>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
CartContext.js
import React, { useState, createContext } from "react";
export const CartContext = createContext();
export const CartProvider = props => {
const [cart, setCart] = useState(["a", "b"]);
return (
<CartContext.Provider value={[cart, setCart]}>
{props.children}
</CartContext.Provider>
);
};
Cart.js
import React, { useContext } from "react";
import { CartContext } from "./CartContext";
function Cart() {
const [cart, setCart] = useContext(CartContext);
function updateCart() {
setCart(prevState => {
const newState = Array.from(prevState);
newState.push("c");
return newState;
});
}
return (
<React.Fragment>
<div>I am Cart</div>
<div>Cart value: {JSON.stringify(cart)}</div>
<button onClick={updateCart}>Add 'c' to cart</button>
</React.Fragment>
);
}
export default Cart;