Nested route in react-router v6 is not working

I am using react-router-dom v6.

const App = () => (
  <Routes>
    <Route path="/" element={<Login />} />
    <Route path="login" element={<Login />} />
    <Route path="/" element={<BaseLayout />}>
      <Route path="system" element={<SystemList />} />
      <Route path="system/create" element={<SystemCreate />} />
    </Route>
  </Routes>
);

Since /system and /system/create do not have shared components (they are completely different screens, but the url structure from the /system screen to the /create screen), the Outlet is not used.

On the other hand, both <SystemList> and <SystemCreate> screens are nested screens of <BaseLayout>, they are expressed in Outlet of <BaseLayout>.

Problem

localhost:3000/, localhost:3000/login, localhost:3000/system all working. But localhost:3000/system/create is not working(No screen appears ).

I tried changing the order of /system and /system/create, and I changed the location to the same level as / and login, but it still doesn't work. What's the problem?