Passing props to Layout in wrapPageElement errors on pageResources, pageContext, and navigate

[nervetrip]

Description

I'm following the official documentation on adding a layout using wrapPageElement:
https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/#wrapPageElement

I'm getting errors in the console regarding pageResources, pageContext, and navigate.

The same thing happens when using gatsby-plugin-layout instead of configuring it manually.

Steps to reproduce

Create gatsby-browser.js. Note I'm using ES6 module format since the CommonJS format in the documentation doesn't appear to work:

import React from "react"
import Layout from "./src/layout"

export const wrapPageElement = ({ element, props }) => {
  return <Layout {...props}>{element}</Layout>
}

Create src/layout/index.js:

import React from 'react'
const Layout = ({ children, ...rest }) => <div {...rest}>{children}</div>
export default Layout

This passes props via <Layout {...props}> which is spread in Layout, causing errors in console.

Expected result

I would expect the documented example to work without console errors.

Actual result

The following errors occur in the console when loading any page:

react-dom.development.js:67 Warning: React does not recognize the `pageResources` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `pageresources` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at div
    at Layout (webpack-internal:///./src/layouts/index.js:47:24)
    ...
react-dom.development.js:67 Warning: React does not recognize the `pageContext` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `pagecontext` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at div
    at Layout (webpack-internal:///./src/layouts/index.js:47:24)
    ...
react-dom.development.js:67 Warning: Invalid value for prop `navigate` on <div> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://reactjs.org/link/attribute-behavior 
    at div
    at Layout (webpack-internal:///./src/layouts/index.js:47:24)
    ...

Workaround

I've been able to work around the problem by changing Layout to this. I don't yet know if this will cause any other issues with page navigation, etc:

const Layout = ({ children, navigate, pageContext, pageResources, ...rest }) => <div {...rest}>{children}</div>

Environment

  System:
    OS: macOS 11.2.3
    CPU: (8) arm64 Apple M1
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.12.0 - ~/.nvm/versions/node/v15.12.0/bin/node
    Yarn: 1.22.10 - /opt/homebrew/bin/yarn
    npm: 7.6.3 - ~/.nvm/versions/node/v15.12.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 91.0.4472.106
    Firefox: 84.0.2
    Safari: 14.0.3
  npmPackages:
    gatsby: ^3.6.2 => 3.6.2 
    gatsby-plugin-emotion: ^6.6.0 => 6.6.0 
    gatsby-plugin-google-analytics: ^3.6.0 => 3.6.0 
    gatsby-plugin-image: ^1.6.0 => 1.6.0 
    gatsby-plugin-layout: ^2.7.1 => 2.7.1 
    gatsby-plugin-manifest: ^3.6.0 => 3.6.0 
    gatsby-plugin-mdx: ^2.6.0 => 2.6.0 
    gatsby-plugin-react-helmet: ^4.6.0 => 4.6.0 
    gatsby-plugin-sharp: ^3.6.0 => 3.6.0 
    gatsby-source-filesystem: ^3.6.0 => 3.6.0 
    gatsby-source-graphql: ^3.7.1 => 3.7.1 
    gatsby-transformer-sharp: ^3.6.0 => 3.6.0 

[LekoArts]

The documentation itself is fine as it doesn't show a Layout component as you write it. The example it links to is here: https://github.com/gatsbyjs/gatsby/blob/master/examples/using-i18n/src/components/layout.js

You can't pass everything onto the div as React shows correctly.