Input field is resetting async function on submit in react-hook-form

I am using react-hook-form library for creating Modal form. The form in my modal is resetting when i submit the form with async await function, if it is normal function it works fine. Things is I do not want fields to be reset when the request is failing. I want it to stay in the modal open and not resetting the form. Also, e.preventdefault() is not working and with handleSubmit we don`t need use it.

So, I am using createAsyncThunk for action

export const deleteTenant = createAsyncThunk<{}, string, { rejectValue: ErrorMessage }>(
  'tenants/deleteTenant',
  async (tenantId, thunkAPI): Promise<void> => {
    try {
      await fetch(url, {
        method: 'DELETE',
      })
      thunkAPI.dispatch(closeModal('delete'))
      await thunkAPI.dispatch(getTenantList())
      toast.success(TextKey.TenantDeleteSuccessMessage)
    } catch (error: any) {
      toast.error(TextKey.TenantDeleteErrorMessage)
      throw thunkAPI.rejectWithValue(error.response.data)
    }
  },
)

const onDeleteSubmit = async () => await dispatch(deleteTenant(id))

 <Modal
        show={isDeleteModalOpen}
        onClose={() => dispatch(closeModal('delete'))}
        title={TextKey.DeleteExistingTenant}
        onSubmit={handleSubmitDelete(onDeleteSubmit)}
        type="tenantDelete"
      >
        {errorTenantDelete && errorTenantDeleteMessage ? (
          <ErrorMessage>{errorTenantDeleteMessage}</ErrorMessage>
        ) : (
          <ErrorMessage>{TextKey.WarningDeleteMessage}</ErrorMessage>
        )}
        <InputField
          errors={errorsDelete}
          label={TextKey.TenantName}
          type="text"
          placeholder={TextKey.TypeNewTenantName}
          {...registerDelete('tenantName', {
            required: TextKey.TenantNameIsRequired,
            pattern: {
              value: /^\w+([\s-_]\w+)*$/,
              message: TextKey.TenantNameValidation,
            },
            validate: {
              tenantNameEqual: (value) => {
                console.log({ value })
                return value === name || TextKey.MatchWithTenantName
              },
            },
          })}
        />
      </Modal>


export const Modal = memo(({ show, onClose, children, title, onSubmit, type }: ModalProps): JSX.Element => {
      const { isLoadingDelete } = useAppSelector(getTenantsState)
    
      const renderIconButton = useCallback(() => {
        switch (type) {
          case 'tenantAdd':
            return (
              <ButtonIcon type="submit" appearance="primary">
                {renderIcon(Outline16FloppyDisk)}
                <Text size={16}>{TextKey.AddTenant}</Text>
              </ButtonIcon>
            )
    
          case 'tenantUpdate':
            return (
              <ButtonIcon type="submit" appearance="primary">
                {renderIcon(Outline16FloppyDisk)}
                <Text size={16}>{TextKey.UpdateTenant}</Text>
              </ButtonIcon>
            )
    
          case 'tenantDelete':
            return (
              <ButtonIcon type="submit" appearance="danger" disabled={isLoadingDelete}>
                {isLoadingDelete ? (
                  <Loader size="small" />
                ) : (
                  <>
                    {renderIcon(Outline16TrashCan)}
                    <Text size={16}>{TextKey.Delete}</Text>
                  </>
                )}
              </ButtonIcon>
            )
    
          default:
            return null
        }
      }, [type])
    
      return (
        <ModalWrapper show={show} onClick={onClose}>
          <ModalContent onSubmit={onSubmit} onClick={(e) => e.stopPropagation()}>
            <Text size={24} weight={500} lineHeight={36} align="center">
              {title}
            </Text>
    
            <ModalBody>{children}</ModalBody>
            <ModalFooter>
              <BlockContainer right="10">
                <Button appearance={TERTIARY_BUTTON} onClick={onClose}>
                  {TextKey.Cancel}
                </Button>
              </BlockContainer>
    
              {renderIconButton()}
            </ModalFooter>
          </ModalContent>
        </ModalWrapper>
      )
    })