React Hook "useMutation" cannot be called at the top level

I am working in React, and I have a mutation that will be called essentially the exact same way across a multitude of different files. Rather than type the same syntax over and over, I attempted to make a hook file that would carry out the process, and I could just import it and call it from inside the many components that need this mutation. However, I am hitting the following error...

React Hook "useMutation" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function

The error is clear enough, I can see what the issue is, but I have no idea how to create a custom React Hook Function and the site to which the direct me to is not particularly helpful. Would someone be able to explain to me how to make this file a 'react hook?'

import React from "react";
import { useMutation } from "@apollo/client";
import { MANAGER_REFRESH, OWNER_REFRESH } from "../../graphql/operations";

const [managerRefresh, { loading: loadingM, error: errorM, data: dataM}] = useMutation(MANAGER_REFRESH)
const [ownerRefresh, { loading: loadingO, error: errorO, data: dataO}] = useMutation(OWNER_REFRESH)


const refresh = async (role, userId) => {
    if (role === "MANAGER"){
        return await managerRefresh({
            variables: {
                role: role,
                id: userId
            }
        })
    }
    else if (role === "OWNER"){
        return await ownerRefresh({
            variables: {
                role: role,
                id: userId
            }
        })
    }
}

export default refresh