How to handle when two nested Context providers are used in App.js file, each without one inside other will result in error

Question

In this below code I need ThemeState to come over the AlertState, but if I do that, then I get the same error as what I am getting now. So how to handle this type of code.

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;

This is the error I am getting now and if I swap those two position I get the same error

cannot destructure property 'setmsg' of '(0,react__webpack_imported_module_0__.usecontext)(...)' as it is undefined.