Help with NotFoundRoute overlapping with the root route

export const Route = new RootRoute({
  component: () => {
    return (
      <>
        hey
        <Outlet />
        <TanStackRouterDevtools position="bottom-right" />
      </>
    );
  },
});

export const Route = new FileRoute('/docs').createRoute({
  component: Docs,
});

function Docs() {
  return (
    <div>
      <span>This is the docs page</span>
    </div>
  );
}

const notFoundRoute = new NotFoundRoute({
  getParentRoute: () => rootRoute,
  component: () => <div>Not found</div>,
});

const router = new Router({ routeTree, notFoundRoute });

declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router;
  }
}

function App() {
  return <RouterProvider router={router} />;
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);