I have this confirmDeactivateJob function which fires the mutation function after the user clicks a confirm button. However, it always throws an error before being able to be run on the browser.

This is the error:
Unhandled Runtime Error
Error: Rendered more hooks than during the previous render.

This is the code:
const mutation = useMutation<any, AxiosError, string>((jobID) => deleteJob(jobID), {
onSuccess: () => {
console.log(This job ${jobID} is deleted successfully!);
},
onError: (error) => {
console.log('error::::::', error);
},
});

function confirmDeactivateJob() {
mutation.mutate(jobID);
setOpenModal(false);
}

This is the code for the deleteJob function
export const deleteJob = async (jobID: string): Promise<void> => {
await axios.delete(/jobs/jobs/${jobID}/);
};