Create custom fetch hook for multiple Axios instances - https://itnext.io/create-custom-fetch-hook-for-multiple-axios-instances-661a73701f73

index.js

import useFetch from "useFetch";

const { response, isLoading } = useFetch({
		api: identityApi,
		url: AUTH_MEMBER_TRANSACTIONS(requestOptions),
		config: JSON.stringify({ requireAuthentication: true }),
	});

useFetch.js

import { useState, useEffect } from "react";

export default function useFetch({
	api, method = "get", url, data = null, config = null,
}) {
	const [response, setResponse] = useState(null);
	const [error, setError] = useState("");
	const [isLoading, setIsLoading] = useState(true);

	useEffect(() => {
		const fetchData = async () => {
			try {
				api[method](url, JSON.parse(config), JSON.parse(data))
					.then((res) => {
						setResponse(res.data);
					})
					.catch((err) => {
						setError(err);
					})
					.finally(() => {
						setIsLoading(false);
					});
			} catch (err) {
				setError(err);
			}
		};

		fetchData();
	}, [api, method, url, data, config]);

	return { response, error, isLoading };
}

Nice snippet. You can use an IIFE in place of calling fetchData(); explicitly

const fetchData = async () => {
       // stuff here 
};

fetchData();

Becomes

(async () =>
    // stuff here 
)();

Also, it may also be safer to make api[method] to api[method.toLowerCase()] :)

Hİ @adover both of your comments are really helpful. I liked your point of view :) You made my day!

You don't need an async function for that request by the way.
`
const fetchData = async () => {

try {
  const response = await api[method](url, config, data);  
  setResponse(response.data);
} catch (error) {
  setError(error)
}
setIsLoading(false);

};
`