Estoy tratando de implementar un proveedor de temas en Gatsby usando la API del navegador wrapRootElement. He estado mirando ejemplos en línea y no puedo encontrar dónde me equivoqué. Recibo un error "Los objetos no son válidos como un niño React (encontrado: objeto con claves {niños})".

Esta es la primera vez que uso la API del navegador Gatsby, sé que el problema es con los niños que estoy tratando de transmitir, con el elemento como un objeto, pero mirando todos los ejemplos que puedo encontrar en línea están implementados el mismo camino.

gatsby-navegador.js

 import React from "react" import ThemeWrapper from './src/components/theme/theme' export function wrapRootElement({ element }) { return <ThemeWrapper>{element}</ThemeWrapper> }

tema.tsx

 import * as React from "react" import { ThemeProvider } from "@material-ui/styles" import { CssBaseline } from "@material-ui/core" import ThemeContext from "./themecontext" import { defaultTheme, darkTheme } from "./themedefinition" const ThemeWrapper = (children: React.ReactNode) => { const [isDarkTheme, setDarkTheme] = React.useState(false); const toggleDark = () => { setDarkTheme(!isDarkTheme); } React.useEffect(() => { if (window.matchMedia("(prefers-color-scheme: dark)").matches === true) { setDarkTheme(true); } }, []) return ( <ThemeContext.Provider value={{isDarkTheme, toggleDark}}> <ThemeProvider theme={isDarkTheme ? darkTheme : defaultTheme}> <CssBaseline /> {children} </ThemeProvider> </ThemeContext.Provider> ) } export default ThemeWrapper