title: React Hook "useAxios" is called in function I want to use useAxios in button click event
body: <p>I am developing using react and antd.</p>
  <p>This is useAxios I wrote.</p>
  <p>code</p>
  <pre><code>import { useState, useEffect } from 'react';
  import axios from 'axios';
  
  axios.defaults.baseURL = 'http://localhost:3000/';
  
  const useAxios = ({ url, method, body = null, headers = null }) =&gt; {
    const [response, setResponse] = useState(null);
    const [error, setError] = useState('');
    const [loading, setloading] = useState(true);
  
    const fetchData = () =&gt; {
      axios[method](url, headers, body)
        .then((res) =&gt; {
          setResponse(res.data);
        })
        .catch((err) =&gt; {
          setError(err);
        })
        .finally(() =&gt; {
          setloading(false);
        });
    };
  
    useEffect(() =&gt; {
      fetchData();
    }, [method, url, body, headers]);
  
    return { response, error, loading };
  };
  
  export default useAxios;
  </code></pre>
  <p>This is the login component.</p>
  <pre><code>import React from 'react';
  import { Form, Input, Button } from 'antd';
  import useAxios from '../hooks/useAxios';
  
  const LoginForm = () =&gt; {
    const axios = useAxios;
  
    const onFinish = (body) =&gt; {
      const test = axios({
        url: 'api/auth/login',
        method: 'post',
        body,
      });
      console.log(test);
    };
  
    const findIDAndPassword = () =&gt; {
      console.log('findIDAndPassword');
    };
  
    return (
      &lt;Form name=&quot;basic&quot; onFinish={onFinish} autoComplete=&quot;off&quot;&gt;
        &lt;Form.Item
          name=&quot;id&quot;
          rules={[
            {
              required: true,
              message: 'Please input your id!',
            },
          ]}
        &gt;
          &lt;Input placeholder=&quot;ID&quot; /&gt;
        &lt;/Form.Item&gt;
        &lt;Form.Item
          name=&quot;password&quot;
          rules={[
            {
              required: true,
              message: 'Please input your password!',
            },
          ]}
        &gt;
          &lt;Input.Password placeholder=&quot;PASSWORD&quot; /&gt;
        &lt;/Form.Item&gt;
        &lt;Form.Item&gt;
          &lt;Button type=&quot;primary&quot; htmlType=&quot;submit&quot; block&gt;
            login
          &lt;/Button&gt;
        &lt;/Form.Item&gt;
        &lt;Button type=&quot;link&quot; block onClick={findIDAndPassword}&gt;
          findIDAndPassword
        &lt;/Button&gt;
      &lt;/Form&gt;
    );
  };
  
  export default LoginForm;
  </code></pre>
  <p>but it gives me this error how to fix?</p>
  <p>src\components\LoginForm.js Line 7:18: React Hook &quot;useAxios&quot; is called in function &quot;onFinish&quot; that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word &quot;use&quot; react-hooks/rules-of-hooks</p>
  <p>Search for the keywords to learn more about each error. [1]: <a href="https://i.stack.imgur.com/og592.png" rel="nofollow noreferrer">https://i.stack.imgur.com/og592.png</a></p>