Issue Rendering a Navbar component on certain page routes

Question

I want to render my Header component on all routes except the routes within the layout function Scaffold. I have tried creating an Applayout function that accepts props and children but I'm met with different errors.

My code as it stands:

import Header from "./Header"
import Footer from "./Footer"
import { Routes, Route, Navigate } from "react-router-dom";

export default function AllRoutes() {
  return (
    <ThemeProvider theme={light}>
      <Header />
      <Routes>
        <Route
          path='/'
          element={<Component />}
        />
        <Route path='/someroute' element={<NotFound />} />
        <Route
          path={"/someroute"}
          element={<Component />}
        />
        <Route
          path={"/someroute/*"}
          element={<Component />}
        />
    
        <Route
          path='/someroute/*'
          element={
            <Scaffold noSpacing>
              <ThemeProvider theme={light}>
                <Routes>                                    
                  <Route
                    path={"/someroute/*"}
                    element={<Component />}
                  />
                  <Route
                    path='/*'
                    element={<Navigate to={"/someroute/notfound"} />}
                  />
                </Routes>
              </ThemeProvider>
            </Scaffold>
          }
        />
        <Route path='/*' element={<Component />} />
      </Routes>
      <Footer />
    </ThemeProvider>
  );
}