The splited nested <Route> feature does not work as expected.

[no-miso]

hello.
The code is roughly as below.

route.tsx

import { Route, Router, Routes } from "@solidjs/router";
import { ErrorBoundary, lazy } from "solid-js";

function MyRoute() {
  return (
    <>
      <ErrorBoundary fallback={<div>parent error</div>}>
          <Routes>
            <Route path="/test" component={lazy(() => import("./pages/test"))}/>
            <Route path="*" component={() => <div>Not Found</div>}/>
          </Routes>
      </ErrorBoundary>
    </>
  );
}
export default MyRoute;

test.tsx

import "./test.css"
import { Outlet, Route, Routes } from "@solidjs/router";

export function TestCommon () {
    return (
        <>
            <div>common parts</div>
            <div class="main">
                <Outlet/>
            </div>
        </>
    )
}
export default function Tests () {
    return (
        <>
            <Routes>
                <Route path="/" component={TestCommon}>
                    <Route path="/" element={<div>root</div>}/>
                    <Route path="/1" element={<div>one</div>}/>
                </Route>
            </Routes>
        </>
    )
}

access result

"/test"   // <== OK
"/test/1" // <== display "Not Found"

Moving of test.tsx to route.tsx works as expected.

The reason I want to do this is Lazy import's tediousness.

Question:
Is it not possible to split the routing function, or do you have wrong writing?
I'm confused because of the paths I have access to.