title: useContext returning null upon useQuery
body: <p>I am making a wrapper for the settings page in order for it to be reusable on every settings page. In it, there is a Context Provider in which I pass the user data, but it never seems to pass anything although the query is successful.</p>
  <p>SettingsWrap.tsx</p>
  <pre><code>export const UserContext = React.createContext(null);
  
  const SettingsWrap = ({ children }) =&gt; {
    const [session] = useSession();
    const { data, loading } = useQuery&lt;SettingsData, SettingsVars&gt;(
      SETTINGS_QUERY,
      {
        variables: {
          id: session?.id,
        },
        skip: !session,
      }
    );
  
    return (
      &lt;Grid container spacing={2}&gt;
        &lt;Grid item xs={12} sm={4}&gt;
          &lt;SettingList /&gt;
        &lt;/Grid&gt;
        {data &amp;&amp; !loading ? (
          &lt;UserContext.Provider value={data.userId}&gt;
            &lt;Grid
              item
              xs={12}
              sm={8}
              style={{ height: &quot;100vh&quot;, overflow: &quot;auto&quot; }}
            &gt;
              &lt;Container&gt;{children}&lt;/Container&gt;
            &lt;/Grid&gt;
          &lt;/UserContext.Provider&gt;
        ) : (
          &lt;Grid
            item
            xs={12}
            sm={8}
            style={{
              display: &quot;flex&quot;,
              justifyContent: &quot;center&quot;,
              alignItems: &quot;center&quot;,
              height: &quot;100vh&quot;,
            }}
          &gt;
            &lt;CircularProgress /&gt;
          &lt;/Grid&gt;
        )}
      &lt;/Grid&gt;
    );
  };
  </code></pre>
  <p>AccountSettings.tsx</p>
  <pre><code>  const user: UserInterface = useContext(UserContext); // THIS IS NULL
  </code></pre>
  <p>What is wrong with this code?</p>