title: useContext() react hook doesn't return the correct value
body: <p>I wrap my Home component in the following layout:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export const DataContext = React.createContext({});
  
  const Layout: React.FunctionComponent = (props) =&gt; {
    const data = {title: "abc", description: "def"};
    
    return (
      &lt;DataContext.Provider value={data}&gt;
          {props.children}
      &lt;/DataContext.Provider&gt;
    );
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would like to use useContext hook in my Home component, but it returns an empty object:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const Home: React.FunctionComponent = () =&gt; {
    const content = React.useContext(DataContext);
  
    return (
      &lt;Layout&gt;
         // content data goes here
      &lt;/Layout&gt;
    );
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>I suspected that this is because I define context variable outside of Layout wrapper, which contains context provider, so it falls back to the default value of the context that I defined (an empty object). However, even if I console log the useContext hook inside the layout provider, it also returns an empty object:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const Home: React.FunctionComponent = () =&gt; {
    const content = React.useContext(DataContext);
  
    return (
      &lt;Layout&gt;
        {console.log(React.useContext(DataContext))}
      &lt;/Layout&gt;
    );
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any idea why?</p>