React custom hook for different API task with unique state and handling management in each?

Question

I had already written custom API fetch hooks before, but now I have complex API call functions with different features and couldn't wrap my head around how to create a single custom hook and use all of them.

Each of them got different states, methods, wrappers etc some with a single promise some with promise.all()

1st call:

const handleGetReportsList = async () => {
    setIsLoading(true);
    try {
      const response = await axios(reportURL, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + token
        }
      });
      setReportsList(response.data);
    } catch (err) {
      if (axios.isAxiosError(err)) {
        console.log(err.response);
        notify(
          {
            width: "auto",
            message: `Rapor verileri listelenemiyor.
            ${err.response?.data.message} 
            Hata kodu: ${err.response?.status}`,
            position: {}
          },
          "error",
          6000
        );
        console.error(
          (err instanceof Error && err.message) || "Something's Wrong"
        );
      } else {
        notify("Hata! Çıkış yapıp tekrar deneyin", "error", 6000);
      }
    }
    setIsLoading(false);
  };

2nd call:

const handleGetReportData = async (e: ClickEvent) => {
    const validationResult = e.validationGroup.validate();
    if (validationResult.isValid) {
      setIsLoading(true);
      setIsDataGridVisible(false);
      try {
        const response = await axios(reportURL, {
          method: "POST",
          data: JSON.stringify(reportParams),
          headers: {
            "Content-Type": "application/json",
            Authorization: "Bearer " + token
          }
        });
        setReportData(response.data);
        setIsDataGridVisible(true);
      } catch (err) {
        setIsLoading(false);
        if (axios.isAxiosError(err)) {
          notify(
            {
              width: "auto",
              message: `Rapor verileri listelenemiyor.
          Lütfen tekrar deneyin.
          Hata kodu: ${err.response?.status}`
            },
            "error",
            6000
          );
          console.error(
            (err instanceof Error && err.message) || "Something's Wrong"
          );
        } else {
          notify("Hata! Çıkış yapıp tekrar deneyin", "error", 6000);
        }
      }
    }
  };

3rd call:

const handleGetFilterData = async () => {
    setIsLoading(true);

    setIsFilterButtonVisible(false);
    try {
      const response = await axios(filterURL, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + token
        }
      });
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      dispatchFilterData(response.data);
      setIsFilterButtonVisible(true);
    } catch (err) {
      if (axios.isAxiosError(err)) {
        notify(
          {
            width: "auto",
            message: `Rapor verileri listelenemiyor.
            Lütfen tekrar deneyin.
            Hata kodu: ${err.response?.data.message}`
          },
          "error",
          6000
        );
        console.error(
          (err instanceof Error && err.message) || "Something's Wrong"
        );
      } else {
        notify("Hata! Çıkış yapıp tekrar deneyin", "error", 6000);
      }
    }
    setIsLoading(false);
  };

4th call:

const getDashboardData = async () => {
    const apiSettings: AxiosRequestConfig<IApiSettings> = {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer " + token
      }
    };
    setIsLoading(true);
    try {
      const response = await Promise.all([
        axios(`${dashboardURL}TOPLAM/${period}/`, apiSettings),
        axios(`${dashboardURL}ADET/${period}/`, apiSettings)
      ]);
      const responseData = response.map(item => {
        return item.data;
      });
      setDashboardData(responseData);
    } catch (err) {
      if (axios.isAxiosError(err)) {
        console.log(err.response);
        notify(
          {
            width: "auto",
            message: `Özet verileri listelenemiyor.
            ${err.response?.data.message} 
            Hata kodu: ${err.response?.status}`,
            position: {
              offset: "0 -100"
            }
          },
          "error",
          6000
        );
        console.error(
          (err instanceof Error && err.message) || "Something's Wrong"
        );
      } else {
        notify("Hata! Çıkış yapıp tekrar deneyin", "error", 6000);
      }
    }
    setIsLoading(false);
  };

As the calls are pretty similar I want to create and use hooks.

Cheers