Uncaught TypeError: Cannot destructure property ‘state’

import { createContext, useReducer } from \'react\';
 export const Store = createContext();
// console.log(\'Store :>> \', Store);
const initialState = {
  cart: {
    cartItems: [],
  },
};
function reducer(state, action) {
  switch (action.type) {
    case \'CART_ADD_ITEM\':
      // add to cart
      return {
        ...state,
        cart: {
          ...state.cart,
          cartItems: [...state.cart.cartItems, action.payload],
        },
             };
    default:
        return state;
    }
}
 export function StoreProvider(props) {
    const [state, dispatch] = useReducer(reducer, initialState);
    const value = { state, dispatch };
    // console.log(\"state\", state);
  return <Store.Provider value={value}>{props.children} </Store.Provider>;
}

Uncaught TypeError: Cannot destructure property \’state\’ of \'(0 , react__WEBPACK_IMPORTED_MODULE_0__.useContext)(…)\’ as it is undefined.