How not to show page NotFound404 in routing outside Outlet if Outlet is empty

Question

I want to show admin panel or pages login and sign-up. I use two components: first is with layout (LayoutPages) second is without layout (LayoutEmpty). My menu and another components are render in LayoutPages, but pages login and sign-up are render in LayoutEmpty. For it I use from react-router. All works but if some route from is active component is render after other components. If I use errorElement for Route with it does not works.

import React from "react";
function LayoutPages(props) {
    return (
        <div className="LayoutPages">
            <div className="container">
                {props.children}
            </div>
        </div>
    )
}
export default LayoutPages;

import React from "react";
function LayoutEmpty(props) {
    return (
        <div className="LayoutEmpty">

            {props.children}
        </div>
    )
}
export default LayoutEmpty;

const EmptyLayout = () => (
  <>
    <Outlet />
  </>
)

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <LayoutPages>
          <Routes>
            <Route element={<AppLayout />} errorElement={<NotFound404 />} >
              <Route path="/" element={<Home />} />
              <Route path="/products" element={<Products />} />
              <Route path="/products/:id" element={<ProductItem />} />
              <Route path="/contacts" element={<Contacts />} />
              <Route path="/cabinet" element={<Cabinet />} />
              <Route path="/cars" element={<Cars />} />
              <Route path="/products/:productId/review/:reviewId" element={<Review />} />
              <Route path="/todo" element={<ToDo />} />
              <Route path="/forms" element={<Forms />} />
            </Route>
          </Routes>
        </LayoutPages>

        <LayoutEmpty>
          <Routes>
            <Route element={<EmptyLayout />}>
              <Route path="/log-in" element={<Login />} />
              <Route path="/sign-in" element={<Registration />} />
              <Route path="*" element={<NotFound404 />} />
            </Route>
          </Routes>
        </LayoutEmpty>
      </BrowserRouter>
    </div >
  );
}

So, how I can to render page 404 correctly in my code without hooks?