useAxiosFunction.js

import { useState, useEffect } from "react";

export const useAxiosFunction = () => {
    const [response, setResponse] = useState([]);
    const [error, setError] = useState('');
    const [loading, setLoading] = useState(false);
    const [controller, setController] = useState();

    const axiosFetch = async (config) => {
        const { axiosInstance, method, url, requestConfig = {} } = config;

        try {
            setLoading(true);

            const ctrl = new AbortController();
            setController(ctrl);

            const res = await axiosInstance[method.toLowerCase()](url, {
                ...requestConfig,
                signal: ctrl.signal,
            });
            console.log(res);
            setResponse(res.data);
        } catch (err) {
            console.log(err.message);
            setError(err.message);
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        console.log(controller);

        return () => controller?.abort();
    }, [controller]);

    return [response, error, loading, axiosFetch];
};