Outlet is not displaying as expected

routes
 ┣ app
 ┃ ┣ dashboard.tsx
 ┃ ┗ index.tsx
 ┣ auth
 ┃ ┣ index.tsx
 ┃ ┗ sign-up.tsx
 ┣ __root.tsx
 ┣ about.tsx
 ┗ index.tsx

import { createFileRoute, Link, Outlet } from '@tanstack/react-router'

export const Route = createFileRoute('/app/')({
  component: Home,
})

function Home() {
  return <div>
    SIDEBAR
    <Link to='/app/dashboard'>Dashboard</Link>
    <Outlet />
  </div>
}

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/app/dashboard')({
  component: Home,
})

function Home() {
  return <div>
    Dashboard
  </div>
}

import { createRootRoute, Outlet } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/router-devtools'

export const Route = createRootRoute({
  component: () => (
    <main>
      ROOT
      <Outlet />
      <TanStackRouterDevtools />
    </main>
  ),
})