title: React Context doesn't work using Provider
body: <p>I am simplifying trying to update the <a href="https://reactjs.org/docs/context.html#dynamic-context" rel="nofollow noreferrer">context</a> with React.</p>
  <p>I would like that when I click the title <code>Hello CodeSandbox</code> the loading bar is displayed with the <code>context api</code> data.</p>
  <p>Code example:
  <a href="https://codesandbox.io/s/vyq3r7k4o5" rel="nofollow noreferrer">https://codesandbox.io/s/vyq3r7k4o5</a></p>
  <h1>Loading using Context</h1>
  <pre><code>export const LoadingState = {
    loading: false
  };
  const LoadingContext = React.createContext(LoadingState);
  
  export const LoadingProvider = LoadingContext.Provider;
  export const LoadingConsumer = LoadingContext.Consumer;
  
  const LinearIndeterminate = function() {
    const { loading } = useContext(LoadingContext);
    return (
      &lt;div&gt;
        {loading &amp;&amp; &lt;LinearProgress color=&quot;secondary&quot; /&gt;}
      &lt;/div&gt;
    );
  };
  </code></pre>
  <h1>Consumer</h1>
  <pre><code>class App extends PureComponent {
    state = {
      loading: false
    };
  
    add = () =&gt; {
      const currentState = this.state.loading;
      this.setState({ loading: !currentState });
    };
  
    render() {
      console.info(this.state);
      return (
        &lt;div className=&quot;App&quot;&gt;
          &lt;h1 onClick={this.add}&gt;Hello CodeSandbox&lt;/h1&gt;
          &lt;Loading /&gt;
          &lt;LoadingProvider value={this.state}&gt;
            {this.state.loading}
          &lt;/LoadingProvider&gt;
          &lt;h2&gt;Start editing to see some magic happen!&lt;/h2&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>