Axios cancel HTTP calls when offline

I have several HTTP calls using Axios. I have an interceptor file. I created a function that I am planning to call in another component in order to cancel the calls when needed. I also created a hook which checks if the app is online or offline. Basically, I am trying to call this hook in another component, and depending if the user is offline, I will abort the HTTP calls by calling the function abortCalls from interceptor. I am not sure if it is the right way to proceed since it does not seem to work. For your information, the calls are being made in a seperate file.

Interceptor.js

import axios from 'axios';
import store from '../store';


const controller = new AbortController();
export const abortCalls = () => { controller.abort() };

axios.interceptors.request.use(
    (config) => {
        const { UserLogin } = store.getState();

        if (UserLogin?.userInfo?.token) {
            config.headers['Authorization'] = 'Bearer ' + UserLogin.userInfo.token;
        }

        config.headers['Content-Type'] = 'application/json';

        config.signal['signal'] = controller.signal;

        return config;
    },

    (error) => {
        Promise.reject(error);
    }
);

component.js

import { abortCalls } from '../../services/Interceptors';
import { useIsOnline } from "../../hooks/isOnline";

const SelectMenu = ({ history }) => {
  const isOnline = useIsOnline();

  useEffect(() => {
    if (!isOnline) {
      abortCalls();
    }
  }, [isOnline]);

  return <></>;
};

export default SelectMenu;