react router not fetching data unless i reload

my idea is to set a login functionality where users could login and when submitting data the user would be redirected to home page, then his profile would show instead of login in the top corner, the problem seem that when i login and navigate to the home page and click on the profile, no data would be there unless i reload

in my server there is no data sent through the fetchToken function unless i reload even though i put loader to my page.

my submit function where i send data to backend and get back a token

async function handleSubmit(e: SyntheticEvent) {
    e.preventDefault();
    setSubmitting(true);
    // if no file selected set empty string to show error and don't send data
    if (!fileName) {
      setFileName("");
      setSubmitting(false);
      return;
    }
    const target = e.target as HTMLFormElement;
    const formData = new FormData(target);
    const response = await fetchLogin(formData);

    if (response.token) {
      localStorage.setItem("token", response.token);
      setSubmitting(false);
      
      navigate("..");
    } else {
      setError(response);
      setSubmitting(false);
    }
  }

my fetchLogin function

export async function fetchLogin(data: FormData) {
  try {
    const response = await fetch(`${URL}/onlineUsers/login`, {
      method: "POST",
      body: data,
    });
    const resData = await response.json()
    console.log(resData);
    
    return resData
  } catch (error) {
    // returns the error message if it exist
    return processError(error);
  }
}

my loader and login page

const LoginPage = () => {
  const data = useLoaderData() || {name:"",imageUrl:""}

   
  return (
    <div>
      <From  data={data as LoggedUserData}/>
    </div>
  );
};


export async function loginLoader() {
    const resData = await fetchToken()
    if(resData)return resData
    return;
}

my fetchToken function

export async function fetchToken(){
  const response = await fetch(`${URL}/onlineUsers/token`,{
    method:"POST",
    headers:{
      'Authorization':`Bearer ${token}`
    }
  })
  const resData = await response.json();
  return resData
}

in my backend, a fetch is sent but not with my token, what seems to be the problem? do i need to put my fetching function in redux state (thunk) ?