how to update (when login put token and logout reset) global variable in react for use it on all conponents

I try to make a global variable in react. I succeeded to have global variable and update it when user is login but when I refresh page or go on an another page the variable is clear.

for example I connect with form the user if data is good I put the token in variable like this :

import React, { useEffect, useState } from "react";
import { Navigate, redirect, useNavigate } from "react-router-dom";
import { json } from "stream/consumers";
import Fetch from "../conponents/Fetch";
import globalToken from '../GlobalVariable'

const Login: React.FC = () => {
  var [user, setUser] = useState<string>("");
  var [pass, setPass] = useState<string>("");
  var [login, setLogin] = useState<boolean>(false);
  const navigate = useNavigate();
  useEffect(() => {
    //async function dataFetch(user: string, pass: string) {
    var myHeaders = new Headers();
    myHeaders.append("Content-Type", "text/plain");

    var raw =
      '{\n    "username": "' + user + '",\n    "password": "' + pass + '"\n}';

    var requestOptions = {
      method: "POST",
      headers: myHeaders,
      body: raw,
    };

    fetch("https://bilemo.thomas-dasilva.fr/BileMo/login_check", requestOptions)
      .then((response) => response.text())
      .then((result: any) => {
        if (result !== '{"code":401,"message":"Invalid credentials."}') {
          let token: any = JSON.parse(result);
          //process.env.REACT_APP_TOKEN = token.token;
          //console.log(process.env.REACT_APP_TOKEN)
          globalToken.test = token.token
          setLogin(true);
          return navigate("/home");
        }
      })
      .catch((error) => console.log("error", error));
    //}
  });
  return (
    <>
      <main>
        <section>
          <h1>Login</h1>
          <form
            method="POST"
            onSubmit={(e) => {
              e.preventDefault();
              var inputUser = document.getElementById(
                "username"
              ) as HTMLInputElement;
              var inputPassword = document.getElementById(
                "password"
              ) as HTMLInputElement;
              setUser(inputUser.value);
              setPass(inputPassword.value);
              //<Fetch username="test" password="test" />;
            }}
          >
            <div>
              <label htmlFor="username">Username</label>
              <input
                type="text"
                name="username"
                id="username"
                data-testid="username"
              />
            </div>
            <div>
              <label htmlFor="password">Password</label>
              <input
                type="password"
                name="password"
                id="password"
                data-testid="password"
              />
            </div>
            <button type="submit" data-testid="btnLogin">
              Go login
            </button>
          </form>
        </section>
      </main>
    </>
  );
};

export default Login;

when the user I redirect and I console.log(globalToken.test) I have the token in but when I refresh or change page the variable is clear and return the initial value.
I setup variable like this :

var globalToken = {test: ""}
export default globalToken

I put this in a file and I import it on other conponent
I have try with window but didn't work and with global

I would like to use this variable to check if the user is connect on no, for example if var not empty is :

if (globalToken.test.length > 1) {
        
      }

but variable not register the token when I refresh page.
It's possible with react to do this ?

You need to use either a sessionStorage or localStorage to persist data across reloads, which is available thru the window object. This elegant hook pretty much answers your question.