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

import { useCustom, useApiUrl } from "@refinedev/core";  

interface PostUniqueCheckResponse {  
 isAvailable: boolean;  
}  

const YourComponent = () => {
  const apiUrl = useApiUrl();  
  const { data: customData, isLoading: customIsLoading } = useCustom<PostUniqueCheckResponse>({
    url: `${apiUrl}/strapi-chat`,
    method: "get",
    /*
    config: {
        headers: {
            "x-custom-header": "foo-bar",
        },
        query: {
            title: "Foo bar",
        },
    },
    */
  });

  const doExternalCall = () => {
    console.log(apiUrl);
    console.log(customData);
  };

  return (
    <button onClick={doExternalCall}>Click me</button>
  );
};

import { useCustom, useApiUrl } from "@refinedev/core";  

interface PostUniqueCheckResponse {  
 isAvailable: boolean;  
}  

const YourComponent = () => {
  const apiUrl = useApiUrl();  
  const { data: customData, isLoading: customIsLoading } = useCustom<PostUniqueCheckResponse>({
    url: `${apiUrl}/strapi-chat`,
    method: "get",
    /*
    config: {
        headers: {
            "x-custom-header": "foo-bar",
        },
        query: {
            title: "Foo bar",
        },
    },
    */
  });

  const doExternalCall = () => {
    console.log(apiUrl);
    console.log(customData);
  };

  return (
    <button onClick={doExternalCall}>Click me</button>
  );
};