有可能对钩子进行群体React吗？
我有几个相关的自定义钩子，例如useListProduct，useAddProduct。
在过去，我可以把这些函数打包到一个对象类中，但不能打包到react组件类中。

import {useAxios} from "./useAxios";
export class Product{
   static useListProduct(){
    let url="list product API URL";
    return useAxios(null,"get",url);
  }
  static useAddProduct(product){
    let url="list product API URL";
    return useAxios(product,"post",url);
  }
}

useAxios.js

import axios from "axios";
import { useEffect, useReducer } from 'react';
import { redirect } from "react-router-dom";
let reducer = (state, action) => {
    let result = { ...state };
    switch (action.type) {
        case "updateData":
            result.data = action.data;
            result.isLoading = false;
            break;
        case "updateError":
            result.error = action.error;
            result.isLoading = false;
            break;
        default:
            break;
    }
    return result;
}
export function useAxios(data, method, url, header, responseType) {
    const [itemList, updateItemList] = useReducer(reducer, { data: undefined, error: undefined, isLoading: true });
    useEffect(()=>{
        let fetchApi = async () => {
            let requestObj = { "method": method, "url": url }
            if (method.toLowerCase() === "get") {
                requestObj.params = data;
            } else {
                requestObj.data = data;
            }
            requestObj["responseType"] = responseType || undefined;
            requestObj["headers"] = header || undefined;
            try {
                let result = await axios(requestObj);
                updateItemList({ "data": result.data, type: "updateData" });
            } catch (error) {
                let errorObj;
                if (error.response) {
                    switch (error.response.status) {
                        case 401:
                            alert(error.response.data);
                            redirect("/login");
                            break;
                        case 404:
                            errorObj = {
                                status: 404,
                                message: error.message
                            };
                            break;
                        default:
                            errorObj = {
                                status: error.response.status,
                                message: error.response.data
                            };
                            break;
                    }
                } else {
                    errorObj = { message: error.message };
                }
                updateItemList({ "error": errorObj, type: "updateError" });
            }
        }
        fetchApi();    
    },[]);
    return [
        itemList.isLoading,
        itemList.data,
        itemList.error
    ];
}

不幸的是，react会提示以下消息：
无法在类组件中调用React挂接“useAxios”。必须在React函数组件或自定义React挂接函数react-hooks/rules-of-hooks中调用React挂接
那么，将所有相关的钩子组合在一起的最佳实践是什么呢？