Weird useSession hook bug

index.tsx

import { useSession } from "next-auth/client";

// Components
import Link from "next/link";
import { Page, Button, Grid, Text, Card } from "@geist-ui/react";

import SignIn from "web/components/sign-in";

const HomePage = () => {
  const [session, loading] = useSession();

  return (
    <Page>
      <Page.Header>
        <Grid.Container
          style={{ padding: "1em 0" }}
          justify={session ? "space-between" : "center"}
        >
          <Text h3>School Management OSS</Text>

          {session && (
            <Link href="/api/auth/signout">
              <Button loading={loading} type="error">
                Sign Out
              </Button>
            </Link>
          )}
        </Grid.Container>
      </Page.Header>

      <Page.Content>
        <Grid.Container alignItems="center" justify="center" direction="column">
          {session ? <Card></Card> : <SignIn loading={loading}></SignIn>}
        </Grid.Container>
      </Page.Content>
    </Page>
  );
};

export default HomePage;

web-components-sign-in.tsx

import Link from "next/link";
import { Grid, Card, Text, Image, Button } from "@geist-ui/react";
import { useSession } from "next-auth/client";
import { useEffect } from "react";

export default function SignIn({ loading }: { loading: boolean }) {
  const [session] = useSession();

  useEffect(() => {
    console.log(session);
  }, [session]);

  return (
    <Grid>
      <Card hoverable type="lite" style={{ padding: "1em" }}>
        <Image src="/undraw_with_love_ajy1.svg" width={400}></Image>
        <Text h4>Sign In to continue</Text>

        <Link href="/api/auth/signin">
          <Button loading={loading} type="success">
            Sign In
          </Button>
        </Link>
      </Card>
    </Grid>
  );
}