I am working on basic Food Order project with React.js. For preventing props drilling, I want to use context, but I encounter with error. There are default values in my context (items, amount and so on), and when I console.log(ctx.item) in Cart component, I see it shows undefined, however it has to return an empty array. This is my context.js:

import React from 'react';

const cartContext = React.createContext({
    items: [],
    totalQuantity: 0,
    addItem: (item) => {},
    removeItem: (item) => {}
})

export default cartContext;

And this is the context-provider here:

import cartContext from "./cartContext";

export default function CartProvider (props) {
    
    const cartContextData = {
        items: [],
        totalQuantity: 0,
        addItem: (item) => {},
        removeItem: (id) => {}
    }

    return (
        <cartContext.Provider value={cartContext}>
            {props.children}
        </cartContext.Provider>
    )
}

I use context provider in app.js

import './App.css';
import Header from './Components/Header/Header'
import React, { useState } from 'react';
import cartContext from './Storage/cartContext';
import Meals from './Components/Meals/Meals';
import data from './Storage/data.js';
import CartItems from './Components/Header/Cart/CartItems';
import CartProvider from './Storage/CartProvider';

function App() {
  const [isCartDisplayed, setCardDisplay] = useState(false)

  const displayCartFunction = () => {
    setCardDisplay(prevState => prevState ? false : true);
  }

  return (
    <CartProvider>
      {isCartDisplayed && <CartItems displayCartFunction={displayCartFunction}></CartItems>}
      <Header displayCartFunction={displayCartFunction}></Header>
      <Meals data={data}></Meals>
    </CartProvider>
  );
}

export default App;

And this is where I face with undefined error when I print ctx.item:

import React, { useContext, Fragment } from 'react';
import cartContext from '../../../Storage/cartContext';
import './Cart.css'
import CartIcon from './CartIcon';
import CartItems from './CartItems';

function Cart(props) {
    const ctx = useContext(cartContext);

    console.log(ctx.items)

    return (
        <Fragment>

            <button onClick={props.displayCartFunction} className='card-button'>
                <CartIcon />
                &nbsp;
                <span>Your Card</span>
                &nbsp;
                <span className='card-badge'>0</span>
            </button>
        </Fragment>
    )
}

export default Cart;

What would be the problem ?