title: useContext returning undefined
body: <p>I am using react-context to create and use contexts. I am unable to use the contexts in the children components of the context-provider. </p>
  
  <p>I can access the contexts on the App context. But whenever I tried to access to separate components the useContext returns undefined.</p>
  
  <p>My App component looks like this.</p>
  
  <pre><code>&lt;div className="App"&gt;
      &lt;Navbar /&gt;
      &lt;Header/&gt;
  &lt;InstructorContextProvider&gt;
  &lt;InstructorPage /&gt;
  &lt;/InstructorContextProvider&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The instructorContext looks like : </p>
  
  <pre><code>const InstructorContextProvider = (props) =&gt; {
  const [instructorList] = useState([1,2,3,4]); 
  return (
     &lt;InstructorContext.Provider value = {[...instructorList]}&gt;
         {props.children}
     &lt;/InstructorContext.Provider&gt;
  </code></pre>
  
  <p>The InstructorPage component returns undefined when the InstructorContext is used.</p>
  
  <pre><code>const InstructorPage = () =&gt; {
  const [...instructorList] = useContext(InstructorContext);
  console.log(instructorList);
  return &lt;h1&gt; hello world &lt;/h1&gt;
  }
  </code></pre>