title: Type Children Element is missing properties with Nextjs + React Context with TypeScript
body: <p>Using Reacts Context with Nextjs and TypeScript is showing a vague error wrapping context around the <code>_app.tsx</code>.</p>
  <p>Event though I am passing in the values to the Context Provider it's giving me the error:</p>
  <p>&quot;Type '{ children: Element; }' is missing the following properties from type 'ContextProps': capturedPokemons, catchPokemon, releasePokemon&quot;</p>
  <p>Here is my <code>_app.tsx</code></p>
  <pre class="lang-js prettyprint-override"><code>function MyApp({ Component, pageProps }: AppProps) {
    return (
      &lt;CaughtProvider&gt;
        &lt;Component {...pageProps} /&gt;
      &lt;/CaughtProvider&gt;
    );
  }
  
  </code></pre>
  <p>Here is the Context:</p>
  <pre class="lang-js prettyprint-override"><code>type PokemonProps = {
    number: string;
    name: string;
    image: string;
  };
  
  type ContextProps = {
    capturedPokemons: PokemonProps[];
    catchPokemon: (newPokemon: PokemonProps[]) =&gt; void;
    releasePokemon: (id: string) =&gt; void;
  };
  
  const CaughtContext = createContext&lt;ContextProps&gt;({
    capturedPokemons: [],
    catchPokemon: () =&gt; undefined,
    releasePokemon: () =&gt; undefined,
  });
  
  export const useCaught = () =&gt; useContext(CaughtContext);
  
  export const CaughtProvider: React.FC&lt;ContextProps&gt; = ({ children }) =&gt; {
    const [capturedPokemons, setCapturedPokemons] = useState&lt;any&gt;([]);
  
    const catchPokemon = (newPokemon: PokemonProps[]) =&gt; {
      if (capturedPokemons.length &gt;= 6) {
        alert('You cannot carry any more Pokemon.');
        return;
      }
  
      const alreadyCaptured = capturedPokemons.some(
        (p: PokemonProps) =&gt; p.name === newPokemon[0].name
      );
  
      if (alreadyCaptured) {
        alert('you already have that pokemon');
        return;
      }
  
      if (window.confirm('Capture Pokemon')) {
        setCapturedPokemons([...capturedPokemons, ...newPokemon]);
      }
    };
  
    return (
      &lt;CaughtContext.Provider
        value={{ catchPokemon, capturedPokemons, releasePokemon }}&gt;
        {children}
      &lt;/CaughtContext.Provider&gt;
    );
  };
  
  </code></pre>
  <p>The app works fine as expected and as I'm aware this is how it's done in plain React/JS without TypeScript.</p>