Creé un gancho Axios personalizado para manejar las solicitudes y me gustaría agregar AbortController para cancelar las solicitudes y evitar que ocurra este error.

Sin embargo, en mi gancho personalizado, no tengo un efecto de uso para limpiar el código, ¿dónde debo ejecutar el controller.abort() .

Mi gancho personalizado:

 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; } ); }; };