Estoy recibiendo algún tipo de error. He estado tratando de arreglarlo, pero todavía no puedo resolverlo.

 import React, { Component, createContext } from "react"; export const ThemeContext=createContext(); class ThemeContextProvider extends Component{ state={ isLightTheme: true, light:{ syntax:"#555",ui:"#ddd", bg:"#eee"}, dark:{syntax:"ddd",ui:"#333", bg:"#555"} } toggleTheme=()=>{this.setState({isLightTheme:!this.state.isLightTheme})} render(){ return( <ThemeContext.Provider value={{...this.state, toggleTheme:this.toggleTheme}}> {this.props.children} </ThemeContext.Provider> ) } } export default ThemeContextProvider;

y

 import React, { Component } from "react"; import { ThemeContext } from "./context"; class ThemeToggle extends Component{ static contextType=ThemeContext; render( ) { const{toggleTheme}=this.context; return( <button onClick={toggleTheme}>Toggle the Theme</button> ) } } export default ThemeToggle;

ERROR: ThemeToggle.js: 10 TypeError no detectado: no se puede desestructurar la propiedad 'toggleTheme' de 'this.context' porque no está definida.