Should queryFn(fetcher) be independent of React life cycle?

const createAxiosInstance = ({ t, router, session }): AxiosInstance => {  
  const instance = axios.create({ baseURL: "/api" });  

  instance.interceptors.request.use((config) => {  
    const token = session.data?.token;  
    if (token) config.headers["Authorization"] = `Bearer ${token}`;  
    return config;  
  }, (error) => Promise.reject(error));  

  instance.interceptors.response.use((response) => response, (error) => {  
    if (error.response?.status === 401) router.push("/login");  
    return Promise.reject(error);  
  });  

  return instance;  
};  

const useRequest = () => {  
  const t = useTranslations("errorMessages");  
  const session = useSession();  
  const router = useRouter();  
  const instance = useMemo(() => createAxiosInstance({ t, session, router }), [t, session, router]);
 
  return instance;
};

import axios from "axios";  
const axiosInstance = axios.create({ baseURL: "/api" });  

axiosInstance.interceptors.request.use(async (config) => {  
  const session = await getSession();  
  const token = session?.data?.token;  
  if (token) config.headers["Authorization"] = `Bearer ${token}`;  
  return config;  
}, (error) => Promise.reject(error));  

axiosInstance.interceptors.response.use((response) => response, (error) => {  
  if (error.response?.status === 401) window.location.href = "/login";  
  return Promise.reject(error);  
});  

export default axiosInstance;