React JS Cart - Unable to view items in cart- Getting undefined error

Question

I am having an issue where cartList is initialized as [], I see the cartList being updated by the context code and reducer, but when I try to display the cart items in my cart page using useCart(), it says cartList is undefined. Can someone tell me what could be wrong?

I tried changing the createContext method and checked my context and reducer code, but everything seems fine. CartContext.js

https://codesandbox.io/p/devbox/km-js-kktvgz?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clsudvlvm0006356k6k16a98y%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clsudvlvl0002356kbpxpin45%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clsudvlvl0004356kwy5rmmws%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clsudvlvm0005356k8tpiiluq%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clsudvlvl0002356kbpxpin45%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clsudvlvl0001356k025jqkuf%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clsudvlvl0002356kbpxpin45%2522%252C%2522activeTabId%2522%253A%2522clsudvlvl0001356k025jqkuf%2522%257D%252C%2522clsudvlvm0005356k8tpiiluq%2522%253A%257B%2522id%2522%253A%2522clsudvlvm0005356k8tpiiluq%2522%252C%2522tabs%2522%253A%255B%255D%257D%252C%2522clsudvlvl0004356kwy5rmmws%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clsudvlvl0003356kigy0s9jp%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522start%2522%257D%255D%252C%2522id%2522%253A%2522clsudvlvl0004356kwy5rmmws%2522%252C%2522activeTabId%2522%253A%2522clsudvlvl0003356kigy0s9jp%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

const cartInitialState = {
    cartList: [],
    total: 0
}

const CartContext = createContext();

export const CartProvider = ({children}) => {
    const [state, dispatch] = useReducer(cartReducer, cartInitialState);

    function addToCart(product){
        const updatedList = state.cartList.concat(product);
        const updatedTotal = state.total + product.price;
        console.table(updatedList);
--------------------------------------------------------------------
cartReducer.js
export const cartReducer = (state, action) => {
    const { type, payload } = action;

    switch(type){

        case "ADD_TO_CART":
            console.table(payload.products);
            return {...state, cartList: payload.products, total: payload.total}
---------------------------------------------------
cartList.js
import { useState } from "react"
import { useCart } from "../../../context";
import { CartCard } from "./CartCard";
import { Checkout } from "./Checkout";

export const CartList = () => {
  const [checkout, setCheckout] = useState(false);
  const { productList, total } = useCart();

  console.table(productList);

  return (

    <>
      <section>
        <p className="text-2xl text-center font-semibold dark:text-slate-100 my-10 underline underline-offset-8">
          My Cart ({productList})
        </p>
      </section>

---

I am enclosing my App like so using Cart.Provider, in my index.js

<React.StrictMode>
    <Router>
    <CartProvider> 
     <FilterProvider> 
     <ToastContainer closeButton={false} autoClose={3000} position={"top-right"} />
     <App />
     </FilterProvider>
     </CartProvider>
    </Router>
  </React.StrictMode>
);