A hook that uses axios to fetch data

useAxios.ts

import axios, { AxiosRequestConfig } from 'axios';
import { useEffect, useState } from 'react';

axios.defaults.baseURL = `${process.env.NEXT_PUBLIC_SITE_URL}/api/${process.env.NEXT_PUBLIC_API_VERSION}`;

export const useAxiosFetch = (params: AxiosRequestConfig<any>) => {
    const [data, setData] = useState<any>(null);
    const [error, setError] = useState<any>(null);
    const [loading, setLoading] = useState<boolean>(true);

    const fetchData = async (): Promise<void> => {
        try {
            const response = await axios.request(params);
            setData(response.data);
        } catch (error) {
            if (axios.isAxiosError(error)) {
                setError('Axios Error with Message: ' + error.message);
            } else {
                setError(error);
            }

            setLoading(false);
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        fetchData();

        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    return [data, error, loading, fetchData] as const;
};