Exception thrown when invoking useNavigate within Router root layout

TypeError: Cannot read properties of undefined (reading 'path')

import "./app.css";

import { attachDevtoolsOverlay } from "@solid-devtools/overlay";

import { createAsync, Route, Router, type RouteSectionProps, useNavigate } from "@solidjs/router";
import CircleUser from "lucide-solid/icons/circle-user";
import Clock from "lucide-solid/icons/clock-4";
import LogOut from "lucide-solid/icons/log-out";
import { createEffect, ErrorBoundary, lazy, type ParentProps, Show, Suspense } from "solid-js";

import { isMedium } from "./globalSignals";
import { authClient } from "./lib/auth-client";
import { getAuthState } from "./lib/queries";
import { cn, isNil } from "./lib/utils";
import { Navbar, NavbarLink } from "./Navbar";

const Login = lazy(() => import("./pages/Login"));
const Home = lazy(() => import("./pages/Dashboard"));

attachDevtoolsOverlay();

const MainContent = (props: ParentProps) => {
  return <main class="flex flex-col h-full w-full flex-grow p-4">{props.children}</main>;
};

const RootLayout = (props: RouteSectionProps<unknown>) => {
  const navigate = useNavigate();
  const auth = createAsync(() => getAuthState());

  return (
    <div id="app-screen" class="h-screen w-screen">
      <Show when={!isNil(auth())} fallback={<MainContent {...props} />}>
        <div
          id="root-layout"
          class={cn([
            "h-full",
            isMedium() ? "grid grid-rows-[1fr] grid-cols-[auto_1fr]" : "flex flex-col",
          ])}
        >
          <Navbar>
            <NavbarLink href="/dashboard" icon={<CircleUser />}>
              Dashboard
            </NavbarLink>
            <NavbarLink href="/timesheets" icon={<Clock />}>
              Timesheets
            </NavbarLink>
            <hr class="my-3" />
            <NavbarLink
              href="#"
              icon={<LogOut height={30} />}
              onClick={() => {
                authClient.signOut({
                  fetchOptions: {
                    onSuccess: () => {
                      navigate("/login");
                    },
                  },
                });
              }}
            >
              Sign Out
            </NavbarLink>
          </Navbar>
          <MainContent {...props} />
        </div>
      </Show>
    </div>
  );
};

const ActiveUserSession = (props: ParentProps) => {
  const navigate = useNavigate();
  const auth = createAsync(() => getAuthState());

  createEffect(() => {
    if (!auth()) {
      navigate("/login");
    }
  });

  return (
    <Show when={!isNil(auth())}>
      <Suspense>{props.children}</Suspense>
    </Show>
  );
};

export const App = () => {
  return (
    <ErrorBoundary fallback={<div>Oops! Something went wrong!</div>}>
      <Router
        root={(props) => (
          <Suspense>
            <RootLayout {...props} />
          </Suspense>
        )}
      >
        <Route path="/login" component={Login} />
        <Route
          path="/"
          component={(props) => (
            <Suspense>
              <ActiveUserSession>{props.children}</ActiveUserSession>
            </Suspense>
          )}
        >
          <Route path="/dashboard" component={Home} />
        </Route>
        <Route path="*" component={() => <div>Not Found</div>} />
      </Router>
    </ErrorBoundary>
  );
};