Calling react-query method outside the body of a function component

Question

So, I've been searching the internet for an example of a react-query function called outside the body of the function component; however, I was unable to find a sample.

I have a query type of GraphQL, and I am waiting for a value from the form that I could pass on. So I needed to call it inside the onSubmit function of Formik.

I have generated my hooks with GraphQL Codegen. Since we cannot call the react-hooks outside the function, I am uncertain how I can do this.

So, this is my react-hook for the query

const [{ data, fetching, stale, error, extensions, operation }] = useForgotPasswordQuery({ variables: { email: "value from the form" } });

Unlike with the mutation, it returns a function wherein I could use to call outside the function.

const [, forgotPassword] = useForgotPasswordMutation();

...
<Formik initialValues={{ email: '' }} onSubmit={async (values, { setErrors }) => {
    const response = await forgotPassword({ email: values.email });
}}>

I'd like to know on this use case, I cannot use query type? Or this is a way that I am unaware.

I've read here in the Stackoverflow that the convention:

Query — for querying data (SELECT operations)

Mutation — for creating new and updating/deleting existing data (INSERT, UPDATE, DELETE)

In a way, this convention makes sense to me and I want to implement it. So I am trying to do it using the query rather than the mutation.