Tengo una página de solicitud de una "tarea", y quiero manejar una solicitud si el usuario no envía la tarea o abandona la página.

estos son los casos,

1-

1. Elemento de la lista si el usuario envía el formulario, lo redirigiré a otra página.

2.si el usuario quiere salir de la página de la solicitud de formulario, quiero hacer una solicitud llamada "ELIMINAR".

3. Si el usuario navega fuera de la página haciendo clic en otra ruta pública, también quiero hacer una solicitud llamada "ELIMINAR".

este es el código cuando envío el formulario:

 // here if the user submit the form useEffect(() => { if (submitForm.status === RequestStatus.resolved) { setFormLoading(false); notification.success({ message: t('messages.success'), description: t('messages.success.requestCreated'), }); history.goBack(); } else if (submitForm.status === RequestStatus.rejected) { setFormLoading(false); notification.error({ message: t('leaves.newRequest.message.leaveRequestError'), description: submitForm.error?.message?.includes('Leave request already exists') ? t('leaves.newRequest.error.alreadyExists') : submitForm.error?.message, }); } }, [submitForm.status, t, submitForm.error?.message, history]);

esta es la solicitud de eliminación

 const deleteProcessInstance = useCallback(async () => { try { // Delete request here } catch { notification.error({ message: t('messages.error.wentWrong'), description: t('messages.error.tryAgainLater'), }); } }, [ dispatch, t]);

aquí cómo manejo la solicitud de eliminación si con el caso 2 y 3, pero ahora me encuentro con un error cuando envío el formulario, luego aparece la solicitud de eliminación,

y no quiero eso, solo quiero presionar la solicitud de eliminación si el usuario no envía el formulario y sale de la página de formulario de envío

este es mi codigo

 useEffect( () => () => { deleteProcessInstance(); }, // eslint-disable-next-line react-hooks/exhaustive-deps [] );