Custom React Hook Causing Memory Leak Error

I had created a custom hook to fetch data for a single item but for some reason its causing this error

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    at PostPage (http://localhost:3000/static/js/bundle.js:2530:81)
    at Routes (http://localhost:3000/static/js/bundle.js:48697:5)
    at div
    at Router (http://localhost:3000/static/js/bundle.js:48630:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:48110:5)

Here is the code

const useFetchMultiSingle = (mainUrl, secondaryKey, mainUrlPath, secondaryUrlPath, path) => {

    const [mainUrlDataSingle, setMainUrlDataSingle] = useState(null);
    const [secondaryUrlDataSingle, setSecondaryUrlDataSingle] = useState(null);
    const [loadingMultiUrlSingle, setLoadingMultiUrlSingle] = useState(false);
    const [errorMultiUrlSingle, setErrorMultiUrlSingle] = useState(null);

    useEffect(() => {
        const apiOnePromise = axios.get(`${mainUrl}/${mainUrlPath}?secondary_id=${path}`);
        const apiTwoPromise = axios.get(`http://localhost:5555/${secondaryUrlPath}?id=${path}`);
        setLoadingMultiUrlSingle(true);
        Promise.all([apiOnePromise, apiTwoPromise])
        .then(values => {
            const response01 = values[0].data;
            const response02 = values[1].data;
            setMainUrlDataSingle(response01);
            setSecondaryUrlDataSingle(response02);
        })
        .catch((err) => {
            setErrorMultiUrlSingle(err);
        })
        .finally(() => {
            setLoadingMultiUrlSingle(false);
        })
    }, [mainUrl, secondaryKey, mainUrlPath, secondaryUrlPath, path]);

    const refetch = () => {
        const apiOnePromise = axios.get(`${mainUrl}/${mainUrlPath}?secondary_id=${path}`);
        const apiTwoPromise = axios.get(`http://localhost:5555/${secondaryUrlPath}?id=${path}`);
        setLoadingMultiUrlSingle(true);
        Promise.all([apiOnePromise, apiTwoPromise])
        .then(values => {
            const response01 = values[0].data;
            const response02 = values[1].data;
            setMainUrlDataSingle(response01);
            setSecondaryUrlDataSingle(response02);
        })
        .catch((err) => {
            setErrorMultiUrlSingle(err);
        })
        .finally(() => {
            setLoadingMultiUrlSingle(false);
        })
    };

  return { mainUrlDataSingle, secondaryUrlDataSingle, loadingMultiUrlSingle, errorMultiUrlSingle, refetch };
};

This hook fetches the data from the main url and then fetches the data from the second url based on the first api response data