I'm running into an issue which is super frustrating and I can't figure out whats going on.
I have a simple context as shown here:

import React, { useState, createContext } from react;



export const AppStateContext = createContext();



const AppStateContextProvider = props => {

  const [appState, setAppState] = useState({

    cartOpen: false

  });



  return <AppStateContext.Provider value={{ appState, setAppState }}>{props.children}</AppStateContext.Provider>;

};



export default AppStateContextProvider;

I've also wrapped my App in the provider:

import React from react;

import ReactDOM from react-dom;

import App from ./components/App;

import CssBaseline from @material-ui/core/CssBaseline;

import { createMuiTheme, ThemeProvider } from @material-ui/core/styles;

import { deepPurple, amber } from @material-ui/core/colors;

import AppStateContextProvider from ./contexts/AppStateContext;



const theme = createMuiTheme({

  palette: {

    type: dark,

    primary: {

      main: deepPurple[400]

    },

    secondary: {

      main: amber[800]

    }

  }

});



ReactDOM.render(

  <ThemeProvider theme={theme}>

    <CssBaseline />

    <AppStateContextProvider>

      <App />

    </AppStateContextProvider>

  </ThemeProvider>,

  document.getElementById(root)

);

and I'm consuming the context here:

import React, { useContext } from react;

import {

  Grid,

  Card,

  CardHeader,

  CardContent,

  CardActions,

  Divider,

  Container,

  AppBar,

  Toolbar,

  IconButton,

  Tooltip

} from @material-ui/core;

import ShoppingCartIcon from @material-ui/icons/ShoppingCart;

import AppStateContext from ../contexts/AppStateContext;



const TopAppBar = props => {

  console.log(context: , AppStateContext);

  console.log(useContext(context): , useContext(AppStateContext));



  //   const { appState, setAppState } = useContext(AppStateContext);



  return (

      <AppBar>

      <Toolbar>

        <Tooltip title=View Cart>

          <IconButton>

            <ShoppingCartIcon />

          </IconButton>

        </Tooltip>

      </Toolbar>

    </AppBar>

  );

};



export default TopAppBar;

The line of code that is commented out throws an error because useContext(AppStateContext) is undefined.
The output of the two console logs are this:

context:  props => {

  const [appState, setAppState] = Object(react__WEBPACK_IMPORTED_MODULE_0__[useState])({

    cartOpen: false

  });

  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(App…

useContext(context):  undefined

As you can see, the context looks okay, but calling useContext on the context returns undefined. So there must be some mistake somewhere but I'm struggling to find it.

Any help would be greatly appreciated! :)