title: useContext() returns undefined
body: <p>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:</p>
  
  <pre><code>import React, { useState, createContext } from "react";
  
  export const AppStateContext = createContext();
  
  const AppStateContextProvider = props =&gt; {
    const [appState, setAppState] = useState({
      cartOpen: false
    });
  
    return &lt;AppStateContext.Provider value={{ appState, setAppState }}&gt;{props.children}&lt;/AppStateContext.Provider&gt;;
  };
  
  export default AppStateContextProvider;
  </code></pre>
  
  <p>I've also wrapped my App in the provider:</p>
  
  <pre><code>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(
    &lt;ThemeProvider theme={theme}&gt;
      &lt;CssBaseline /&gt;
      &lt;AppStateContextProvider&gt;
        &lt;App /&gt;
      &lt;/AppStateContextProvider&gt;
    &lt;/ThemeProvider&gt;,
    document.getElementById("root")
  );
  
  </code></pre>
  
  <p>and I'm consuming the context here:</p>
  
  <pre><code>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 =&gt; {
    console.log("context: ", AppStateContext);
    console.log("useContext(context): ", useContext(AppStateContext));
  
    //   const { appState, setAppState } = useContext(AppStateContext);
  
    return (
        &lt;AppBar&gt;
        &lt;Toolbar&gt;
          &lt;Tooltip title="View Cart"&gt;
            &lt;IconButton&gt;
              &lt;ShoppingCartIcon /&gt;
            &lt;/IconButton&gt;
          &lt;/Tooltip&gt;
        &lt;/Toolbar&gt;
      &lt;/AppBar&gt;
    );
  };
  
  export default TopAppBar;
  </code></pre>
  
  <p>The line of code that is commented out throws an error because <code>useContext(AppStateContext)</code> is <code>undefined</code>.
  The output of the two console logs are this:</p>
  
  <pre><code>context:  props =&gt; {
    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
  </code></pre>
  
  <p>As you can see, the context looks okay, but calling <code>useContext</code> on the context returns undefined. So there must be some mistake somewhere but I'm struggling to find it.</p>
  
  <p>Any help would be greatly appreciated! :)</p>