En este código a continuación, necesito que ThemeState venga a AlertState, pero si lo hago, obtendré el mismo error que obtengo ahora. Entonces, cómo manejar este tipo de código.

 import "./App.css"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import About from "./components/About"; import { Navbar } from "./components/Navbar"; import { Home } from "./components/Home"; import NoteState from "./context/notes/noteState"; import { Alert } from "./components/alert"; import Login from "./components/Login"; import SignUp from "./components/SignUp"; import AlertState from "./context/notes/alertState"; import { ThemeState } from "./context/notes/ThemeContext"; function App() { return ( <> <NoteState> <AlertState> <ThemeState> <Router> <Navbar /> <Alert message={null} /> <div className={`my-2 text-dark bg-light`}> <Routes> <Route exact path="/" element={<Home />} /> <Route exact path="/about" element={<About />} /> <Route exact path="/signup" element={<SignUp />} /> <Route exact path="/login" element={<Login />} /> </Routes> </div> </Router> </ThemeState> </AlertState> </NoteState> </> ); } export default App;

Este es el error que recibo ahora y si cambio esas dos posiciones obtengo el mismo error

no se puede desestructurar la propiedad 'setmsg' de '(0,react__webpack_imported_module_0__.usecontext)(...)' ya que no está definida.