Wrap 404 Page with a Layout in React Router v6

Question

I'm trying to wrap my 404 Page with a layout component that I used to wrap antoher paths. The problem is that I can't achieve the Error404 component renders. I'm trying doing something like this:

The Main component renders ok, but <Errors404/> does not appear. Main component as you can see, also is used for other routes, but receiving showFilters props as true.

Any ideas?

const App = () => (
  <ThemeProvider theme={mainTheme}>
    <Routes>
      <Route element={<Main showFilters />}>
        <Route index element={<Navigate to="/dashboard" />} />
        <Route
          path="dashboard"
          element={
            <RequireAuth>
              <Dashboard />
            </RequireAuth>
          }
        />
        <Route
          path="locations"
          element={
            <RequireAuth>
              <Locations />
            </RequireAuth>
          }
        />
      </Route>
      <Route path="/login" element={<Login />} />
      <Route path="password-recovery" element={<PasswordRecovery />} />
      <Route path="/reset/:uid/:token" element={<PasswordReset />} />

      <Route path="*" element={<Main showFilters={false} />}>
        <Route path="*" element={<Error404 />} />
      </Route>
    </Routes>
  </ThemeProvider>
);

export default App;