Invalid hook call. Hooks can only be called inside of the body of a function component - React error

Пишу простой сайт по выводу товаров и категорий, из-за некоторых особенностей сервера приходится подключаться к api немного мудрёным способом, при попытке запросить категории выводится ошибка: Invalid hook call. Hooks can only be called inside of the body of a function component.

Как правильно обращаться к OauthRequest для корректной работы?

OuathRequest:

import { useEffect, useState } from "react";
import OAuth from "oauth-1.0a";
import CryptoJS from "crypto-js";

export function OAuthRequest({ endpoint }) {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const url = process.env.REACT_APP_BASE_URL + endpoint;
        const consumerKey = process.env.REACT_APP_CONSUMER_KEY;
        const consumerSecret = process.env.REACT_APP_CONSUMER_SECRET;

        const oauth = OAuth({
          consumer: {
            key: consumerKey,
            secret: consumerSecret,
          },
          signature_method: "HMAC-SHA256",
          hash_function(base_string, key) {
            const signature = CryptoJS.HmacSHA256(base_string, key);
            return CryptoJS.enc.Base64.stringify(signature);
          },
        });

        const requestData = {
          url,
          method: "GET",
        };

        const token = {
          key: "",
          secret: "",
        };

        const headers = oauth.toHeader(oauth.authorize(requestData, token));

        const response = await fetch(url, {
          method: "GET",
          headers: {
            ...headers,
            "Content-Type": "application/json",
          },
        });

        if (response.ok) {
          const jsonData = await response.json();
          setData(jsonData);
        } else {
          setError("Ошибка при выполнении запроса.");
        }
      } catch (error) {
        setError("Произошла ошибка: " + error.message);
      }
    };

    fetchData();
  }, [endpoint]);

  if (error) {
    return { error };
  }
  if (!error && data) {
    return data;
  }
}

export default OAuthRequest;

categories:

import { useEffect, useState } from "react";
import OAuthRequest from "./wooConnect";

const CategoriesMenu = ({ onSelectCategory }) => {
  const [categoryTree, setCategoryTree] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const categories_list = await OAuthRequest({ endpoint: "/categories/" });
      if (
        categories_list &&
        !categories_list.error &&
        categories_list.length > 0
      ) {
        const filteredCategories = categories_list.filter(
          (category) => category.slug !== "misc"
        );
        const tree = buildCategoryTree(filteredCategories);
        setCategoryTree(tree);
      }
    };

    fetchData();
  }, [onSelectCategory]);

  const buildCategoryTree = (categories, parentId = 0) => {
    return categories
      .filter((category) => category.parent === parentId)
      .map((category) => ({
        ...category,
        subcategories: buildCategoryTree(categories, category.id),
      }));
  };

  const renderCategories = (categoryTree, isSubcategory = false) => {
    if (!categoryTree) return null;

    const categoryClassName = isSubcategory
      ? "font-medium text-base"
      : "font-bold text-lg";
    const categoryDevider = isSubcategory ? "- " : "";

    return (
      <div className="mt-5 ml-5">
        {categoryTree.map((category) => (
          <div className="space-y-2" key={category.id}>
            <div
              className={categoryClassName + " cursor-pointer hover:underline"}
              onClick={() => onSelectCategory(category.id)}
            >
              {categoryDevider + category.name}
            </div>
            {renderCategories(category.subcategories, true)}
          </div>
        ))}
      </div>
    );
  };

  if (categoryTree) {
    return (
      <div className="w-1/5 pl-5 pt-5">{renderCategories(categoryTree)}</div>
    );
  }

  return null;
};

export default CategoriesMenu;