Issues with authenticated routes

const rootRoute = new RootRoute({ component: Root });

// Layout routes

const layoutRoute = new Route({
    getParentRoute: () => rootRoute,
    id: "layout",
    component: Layout,
});

// Authenticated routes

const authenticatedRoutes = new Route({
    getParentRoute: () => layoutRoute,
    id: "auth-layout",
    component: AuthComponent,
});

const dashboardRoute = new Route({
    getParentRoute: () => authenticatedRoutes,
    path: "/dashboard",
    component: Dashboard,
});

// Unauthenticated routes

const homeRoute = new Route({
    getParentRoute: () => rootRoute,
    path: "/",
    component: Home,
});

const loginRoute = new Route({
    getParentRoute: () => rootRoute,
    path: "/login",
    component: Login,
});

const routeTree = rootRoute.addChildren([
    homeRoute,
    loginRoute,
    authenticatedRoutes.addChildren([dashboardRoute]),
]);

export { routeTree };

export const Root = () => (
    <Outlet />
);

export const Layout = () => (
    <Navigation>
        <Outlet />
    </Navigation>
);

export const AuthComponent = () => {
    const { authenticated } = useAuth();

    return (
        authenticated ? <Outlet /> : <Navigate to="/login" />
    );
};