useEffect doesn't listen localStorage due to react-query

Question

import SignInButton from "../UI/SignInButton/SignInButton";
import ProfileBar from "../UI/ProfileBar/ProfileBar";
import SignUpButton from "../UI/SignUpButton/SignUpButton";
import { useEffect, useState } from "react";


const Header = () => {
  const [isLogin, setIsLogin] = useState<boolean>(
    !!localStorage.getItem("access"),
  );

  useEffect(() => {
    function handleStorageChange() {
      setIsLogin(!!localStorage.getItem("access"));
    }

    window.addEventListener("storage", handleStorageChange);

    return () => {
      window.removeEventListener("storage", handleStorageChange);
    };
  }, []);

  return (
    <>
      <header className='sticky top-0 z-30'>
        <div
          className='
            flex justify-between px-12 max-xl:px-8 bg-t-header-bottom h-[70px] items-center max-md:px-4 border-b-2 border-b-t-header-bottom-border
          '
        >
          <div className='flex items-center max-lg:hidden'>
            {isLogin ? (
              <ProfileBar />
            ) : (
              <div className='flex gap-3'>
                <SignInButton />
                <SignUpButton />
              </div>
            )}
          </div>
        </div>
      </header>
    </>
  );
};

export default Header;

here I'm trying to make useEffect react to changes in localStorage and everything works, but only when I delete values from localStorage manually

import { useLogout } from "src/hooks/AuthHooks";

const ProfileBar = () => {
  const logout = useLogout();

  return (
    <div className='text-t-text-primary' onClick={() => logout.mutateAsync()}>
      Logout
    </div>
  );
};

export default ProfileBar;

the component in which useLogout is called

export function useLogout() {
  return useMutation(() => AuthService.logout(), {
    onSuccess: () => {
      localStorage.removeItem("access");
      localStorage.removeItem("refresh");
    },
    onError: (data) => console.log(data),
  });
}

onSuccess is triggered and I can even see how access and refresh are removed from localStorage, but the useEffect no longer responds to this