Getting the user in the rootcomponent

client: {
    rootComponent: import Root from "@src/client/Root",
  }

const links: { link: Routes, label: string }[] = [
  { link: routes.RootRoute, label: 'Home' },
  { link: routes.ClassRoute, label: 'Class' },
  { link: routes.CourseRoute, label: 'Course' },
];

export default function Root({ user, children }: { user: AuthUser, children: React.ReactNode }) {
  return (
    <MantineProvider>
      <Header user={user} />
      {children}
    </MantineProvider>)
}

function Header({ user }: { user: AuthUser }) {
  const items = links.map((link) => (
    <NavLink to={link.link.to}>
      <Button key={link.label}>{link.label}</Button>
    </NavLink>
  ));

  return (
    <header className={classes.header}>
      <Container size="md" className={classes.inner}>
        <h1>Teachers tools</h1>
        <Group gap={5} visibleFrom="xs">
          {user && items}
          {user && <Button size="s" onClick={logout}>Logout</Button>}
          {!user && <NavLink to='/login'><Button size="s">Login</Button></NavLink>}
        </Group>
      </Container>
    </header>
  );
}