Problema com context + react-router-dom

Estou tentando usar um context em uma tela especifica em que utilizo o react-router dom e meu navegador está estourando um monte de erro e minha tela fica em branco sempre que eu coloco o context em volta da rota Como posso fazer para usar o context? Como faço para envolver um context na chamada do app.tsx?

app.tsx

function App() {
  return (
    <BrowserRouter>
      <AuthContextProvider>
        <Routes>
          <Route path="/auth/sign-in" element={<LoginPage />} />
          <Route path="/auth/sign-up" element={<RegisterPage />} />
          <Route path="/" element={<LoginPage />} />
          <ProjectsContextProvider>
            <Route path="/projects" element={<ProjectPage />} />
          </ProjectsContextProvider>
        </Routes>
      </AuthContextProvider>
    </BrowserRouter>
  );
}

Erros abaixo

router.ts:5 Uncaught Error: [ProjectsContextProvider] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
react-dom.development.js:20085 The above error occurred in the <Routes> component:
Consider adding an error boundary to your tree to customize error handling behavior.
router.ts:5 Uncaught Error: [ProjectsContextProvider] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>