title: React useContext returns undefined
body: <p>I'm trying to use React Context to manage states for my project, but I can't seem to make it work for my CRA codebase this time while I had successful attempts on other projects. <code>useContext</code> returns undefined so I couldn't access the values inside the context, but I have double checked that my Provider is at my app root level. Appreciate any help.</p>
  
  <p>This is my simplified App component:</p>
  
  <pre><code>import React, { useContext } from 'react';
  import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
  import './App.css';
  
  import { PlayerContextProvider, PlayerContext } from 'contexts/PlayerContext';
  
  const App = () =&gt; (
    &lt;PlayerContextProvider&gt;
      &lt;Test /&gt;
      &lt;Router&gt;
        &lt;Switch&gt;
          &lt;Route path="/" exact component={Home} /&gt;
        &lt;/Switch&gt;
      &lt;/Router&gt;
    &lt;/PlayerContextProvider&gt;
  );
  
  const Test = () =&gt; {
    const values = useContext(PlayerContext);
    console.log('test values', values); // returns undefined!
  
    return &lt;div&gt;Hello World&lt;/div&gt;;
  };
  
  export default App;
  </code></pre>
  
  <p>This is my context:</p>
  
  <pre><code>import React, { useState, createContext } from 'react';
  
  const PlayerContext = createContext();
  
  const PlayerContextProvider = ({ children }) =&gt; {
    const [players, setPlayers] = useState(['test']);
  
    const addPlayer = ({ name }) =&gt; {
      setPlayers([...players, { name }]);
    };
  
    const values = { players, addPlayer };
    console.log('context values', players); // shows ['test'] here
  
    return (
      &lt;PlayerContext.Provider values={values}&gt;
        &lt;&gt;
          {players}
          {children}
        &lt;/&gt;
      &lt;/PlayerContext.Provider&gt;
    );
  };
  
  export { PlayerContextProvider, PlayerContext };
  </code></pre>