I have built a custom Axios hook to handle requests and would like to add the AbortController to cancel requests to prevent this error from happening.

However in my custom hook, I don't have a useEffect to clean up the code, where should I run the controller.abort().

My custom hook:

const useAxios = () => {
  const { setModal } = useContext(ModalContext);

  return (url, method = "get", data = {}) => {
    const controller = new AbortController();
    return instance({ method, url, data, signal: controller.signal }).catch(
      (error) => {
        setModal(() => (
          <div>
            <h1>{error.message}</h1>
          </div>
        ));
        throw error;
      }
    );
  };
};