why unstable_getServerSession changes its value upon browser tab changes?

[yusa-imit]

I'm currently using unstable_getServerSession for session validation on page with SSR.

current code

function login() {
  const { data: session } = useSession();
  if (session) {
    return (
      <Center>
        <div>
          {Object.keys(session).map((v, i) => (
            <p key={i}>{`${v} : ${JSON.stringify(session[v])}`}</p>
          ))}
        </div>
        <Button
          onClick={() => {
            signOut();
          }}
        >
          log out
        </Button>
      </Center>
    );
  }
  return (
    <Center>
      <p>no loged in</p>
      <Button
        onClick={() => {
          signIn();
        }}
      >
        log in
      </Button>
    </Center>
  );
}

export const getServerSideProps = async (context: any) => {
  return {
    props: {
      session: await unstable_getServerSession(context.req, context.res, authOptions),
    },
  };
};

export default login;

User data of mine is quite modified, so initially, session object looks like this when I first get into login page

{
  user : {"provider":"line","name":"遊佐","role":"user","emailVerified":null,"characters":[],"id":"SMskZlPFIckDQrbqaomy"}
  
  expires : "2022-09-20T09:54:36.013Z"
  
  role : "user"
}

and when I switch to another tab, and come back to login page, session object changes like this, without getServerSideProps function calling

{
  user : {"name":"遊佐"}
  
  expires : "2022-09-20T09:54:36.013Z"
  
  role : "user"
}

user object's childs are gone except for name property,

Why does this happen? And can I get some solution for this to sustain origin(first page went in) data?