i have page of request a "task" , and i want to handle one request if the user don't submit the task or he leave the page ,

these are the cases ,

1-

1. List item if the user submit the form i will re-direct him to other page.

2.if user want to leave the page of the form request , i want to make a request called "DELETE".

3.if the user navigate out side the page by click on other public route , then also i want to make a request called "DELETE".

this is code when i submit the form :

// 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]);

this the delete request

 const deleteProcessInstance = useCallback(async () => {
    
      try {

     // Delete request here 

  
      } catch {
        notification.error({
          message: t('messages.error.wentWrong'),
          description: t('messages.error.tryAgainLater'),
        });
      }
    
  }, [ dispatch, t]);

here how to i handle the delete request if with case 2 and 3 , but i faceing now error when i submit the form , then the delete request hit ,

and i don't want that , i want only to hit delete request if the user dont sumbit the form and navigate out of the submit form page

this my code

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