Remove the abort controller after cancelling call

Question

I have managed to cancel my http request via axios and redux. This is what I have so far. I have a modal, this modal is saving data to a database, once I click on the abort, i cancel the dispatch action (the axios call made to save data) in the useEffect. Let 's say now the user exit the modal and decide some other time to go back on the modal to save its data again, the cancel signal is still on the route. How do I clear up the abort controller ? is there a way to do a clean up ?

Here is my service file :

           export const sync = (l, obj, pId, controller) => {
              let a = { ...obj };
     
      return axios.post(`/${l}/f/ff/Create`, {
       signal: controller.signal
  });
};

my action file

export const save =
    (l, el, pId,controller ) => async (dispatch) => {
        try {
            dispatch({ type: SAVE_REQUEST });

            await sync(l, el, pId, controller);

            dispatch({
                type: SAVE_SUCCESS,
                payload: el,
            });
        } catch ( error) {
                dispatch({ type: SAVE_FAIL, payload: error});
            }
        }
  };

and my component

    const { current: controller } = useRef(null);

const handleAbort = () => {
            controller.current?.abort();
            controller.current = null;
        };

  useEffect(() => {
   controller.current = new AbortController();
    dispatch(save(l,el,p.id,controller)
    return () => {
            handleAbort();
        };
    },[])

  
  <div>
<Modal>
<progressbar/>
  <button onclick={handleAbort()}>abort</button>
<button >exit</button>
</Modal>
  </div>