How to define additional routes deeper down the components tree?

[OnkelTem]

I have the following schema:

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Layout />}>
      <Route index element={<>Home</>} />
      <Route path="products" element={<Products />} />
    </Route>
  </Routes>
</BrowserRouter>

and then in the Products component I add more routes:

const Products = () => (
  <Routes>
    <Route index element={<ProductsList />} />
    <Route path="add" element={<ProductAdd />} />
  </Routes>
);

The problem is that the ProductAdd component doesn't render into <Layout/>, it results to a white page.

Sandbox: https://codesandbox.io/p/sandbox/qgxxdc

If this doesn't work, how to define additional routes in descendant components?

I need this to separate responsibilities of different parts of an app.