I am having a custom hook to fetch data from the API. Invoking the custom hook outside handleSubmit works but inside handleSubmit it does not work.

const Login = () => {
  const userRef = useRef();
  const [user, setUser] = useState("");
  
  const isUser = useLoginHook(user); **//// This works**

  const handleSubmit = async (e) => {

    e.preventDefault();
     const isUser = useLoginHook(user); **///// This does not work**

  };

  return (
    <>
       <main className="App">
          <form onSubmit={handleSubmit}>
            <input
              type="text"
              id="username"
              ref={userRef}
              autoComplete="off"
              onChange={(e) => setUser(e.target.value)}
              value={user}
              required
              aria-invalid={validName ? "false" : "true"}
              aria-describedby="uidnote"
              onFocus={() => setUserFocus(true)}
              onBlur={() => setUserFocus(false)}
            />
      </form>
      </main>
    </>
  );
}; 

I am getting error "React hook is called in function that is neither a React function or a custom React Hook function"