title: React context.provider doesn't change the default value
body: <p>I'm using react context.
  First I give to the context default value, and then I give to Context.Provider different value.
  but the consumer still get the default value</p>
  
  <p>HOC that pass notifications (for now is just a simple string)</p>
  
  <pre><code>export const NotificationContext = React.createContext&lt;string&gt;('default');
  
  function withNotifications&lt;T&gt;(WrappedComponent: React.ComponentType&lt;T&gt;) {
  
      return class ComponentWithTheme extends React.Component&lt;T, { data: any }&gt; {
          public render() {
              return (
                  &lt;NotificationContext.Provider value={'value'}&gt;
                      &lt;WrappedComponent {...this.props as T} /&gt;
                  &lt;/NotificationContext.Provider&gt;
              );
          }
      };
  }
  
  export default withNotifications;
  </code></pre>
  
  <p>Consumer</p>
  
  <pre><code>
  const Topbar: React.FC&lt;TopbarProps&gt; = props =&gt; {
      //const [isNotificationOpen, setIsNotificationOpen] = useState(false);
      //const [unreadCount, setUnreadCount] = useState(0);
  
      const notificationContext = useContext(NotificationContext);
      useEffect(() =&gt; {
          console.log(notificationContext);
      }, Object.values(notificationContext));
  
      console.log(notificationContext);
  
  
      return (
          &lt;div&gt;topBar&lt;/div&gt;  );
  };
  export default Topbar;
  
  
  </code></pre>
  
  <p>I'm still get the "default" string and not the "value"</p>