Trying to use custom hooks with axios

Question

I cannot find anything wrong here. I need help.

Error

Line 14:5: React Hook "useAxios" is called in function "handleSubmit" 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 "use" react-hooks/rules-of-hooks

Search for the keywords to learn more about each error.

Header.jsx

const Header = () => {
  const { query, setQuery, setWeather } = useContext(GlobalContext);

  const handleSubmit = (e) => {
    e.preventDefault();

    useAxios();
  };

  return (
    <div>
      <h1>
        <span className="heading-weather">Weather</span> Forecast
      </h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
        />
      </form>
    </div>
  );
};

custom hooks

const useAxios = () => {
  const { query, setQuery, setWeather } = useContext(GlobalContext);

  const fetchData = () => {
    axios
      .get(
        `https://api.openweathermap.org/data/2.5/weather?q=${query}&units=metric&APPID=441d7523d2a2eace2e634653c4a81709`
      )
      .then((res) => {
        const result = res.data;
        setWeather(result);
        setQuery("");
      })
      .catch((err) => console.log(err));
  };

  useEffect(() => {
    fetchData();
  }, []);

  return;
};

export default useAxios;