Repository: next.js
Issue: When using getLayout, the Layout component can't access parent Contexts provided in _app
Labels: bug

### Verify canary release

- [X] I verified that the issue exists in Next.js canary release

### Provide environment information

    Operating System:
      Platform: linux
      Arch: x64
      Version: #3 SMP Thu Mar 31 19:16:58 NZDT 2022
    Binaries:
      Node: 16.14.0
      npm: 8.3.1
      Yarn: 3.2.0-rc.13
      pnpm: N/A
    Relevant packages:
      next: 12.0.10
      react: 17.0.2
      react-dom: 17.0.2

### What browser are you using? (if relevant)

_No response_

### How are you deploying your application? (if relevant)

_No response_

### Describe the Bug

I'm following the documentation on using per-page Layouts. My Layout component calls a hook from a context provided up in the tree in `_app.js` but the hook value is `undefined`. 

This happens with both `useContext` and `Context.Consumer`, no difference.

I stumbled upon this when using `useQuery` from `ApolloProvider`,  but I was able to reproduce it with the most basic usage of Context:

```jsx
//_app.js
export default function MyApp({ Component, pageProps }) {
  const getLayout = Component.getLayout || ((page) => page);
  return (
    <ParentContext.Provider value={true}>
      {getLayout(<Component {...pageProps} />)}
    </ParentContext.Provider>
  );
}

//page.js
export default function Page() { 
  const parent = useParentContext(); //works fine
  return <>Page renders: Parent context is {`${parent}`}</>;
}

function Layout(page) {
  const parent = useParentContext(); //undefined
  return (
    <>
      {page}
      <br />
      Parent context is {`${parent}`}
    </>
  );
}

Page.getLayout = Layout;


//context.js
export const ParentContext = createContext();
export const useParentContext = () => useContext(ParentContext);
```

The value returning from `useParentContext` is always undefined.

### Expected Behavior

The Layout component should be able to read from parent Contexts.

As a workaround, instantiating Layout as a regular component seems to work just fine.

```js
//_app.js
export default function MyApp({ Component, pageProps }) {
  const Layout = Component.getLayout || Fragment;
  return (
    <ParentContext.Provider value={true}>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </ParentContext.Provider>
  );
}


//page.js
function Layout({children}) {
  const parent = useParentContext(); //it works 
  return (
    <>
      {children}
      <br />
      Parent context is {`${parent}`}
    </>
  );
}
Page.getLayout = Layout;
```

That works both when reading Context and in preserving state when navigating between components under the same Layout. I wonder then what are the implications of using this workaround and why the official docs/examples opted for the `(page) => ... {page} ...` pattern instead of `({children}) => ... {children} ...`. From my understanding this is all just React, with nothing specific about Next here. _(Sorry, after writing all this I realised this might not actually be a nextjs bug, but the discussion holds nonetheless.)_

### To Reproduce

Check out a more elaborate version of the code above: https://codesandbox.io/s/trusting-babycat-wdy2cg?file=/pages/index.js