Obteniendo el mensaje “Objetos no son válidos como un hijo de React” al usar Gatsby wrapRootElement TypeScript.

Estoy tratando de implementar un proveedor de temas en Gatsby utilizando la API del navegador wrapRootElement. He estado buscando ejemplos en línea y no puedo encontrar dónde me equivoqué. Estoy obteniendo un error “Los objetos no son válidos como un elemento React (encontrado: objeto con claves {children}).”

Esta es la primera vez que uso la API del navegador de Gatsby, sé que el problema está en los children que estoy intentando pasar, con el elemento siendo un objeto, pero al ver todos los ejemplos que puedo encontrar en línea, se implementan de la misma manera.

gatsby-browser.js

import React from "react"

import ThemeWrapper from './src/components/theme/theme'

export function wrapRootElement({ element }) {
    return <themewrapper>{element}</themewrapper>
}

“`theme.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) => {

<pre><code>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></cssbaseline>
{children}
</themeprovider>
</themecontext.provider>
)
</code></pre>

}

export default ThemeWrapper
“`