how to prevent manual errors from triggering handleSubmit

[rntjr]

My main problem with the code below (just a short example of the component), is that even though the component shows that it has an error, it is letting handleSubmit. I've looked through some discussions and issues but nothing that could help me solve my problem.

NOTE: event.preventDefault() completely prevented the form from being submitted, even when it was valid.

version:
"react-hook-form": "^7.48.2",

const schema = z.object({ extinctionDate: z.string().nullish() })
type schemaType = z.infer<typeof schema >

type ComponentProps = {
 isMandatory?: boolean
}

const Component: FC<ComponentProps > = ({ isMandatory }) => {

const {
    control,
    setError,
    watch,
    handleSubmit,
    reset
  } = useForm<schemaType>({
    mode: 'onChange',
    resolver: `zodResolver(schema),`
    defaultValues: { extinctionDate: null },
  })

const extinctionDateWatch = watch('extinctionDate')

const validateFieldExtinctionDate = useCallback(() => {
    if (isMandatory && !extinctionDateWatch ) {
      setError('extinctionDate', { type: 'submit', message: MESSAGE_MANDATORY_FIELD})
    }
  }, [isMandatory, extinctionDateWatch , setError])

useEffect(() => validateFieldExtinctionDate(), [validateFieldExtinctionDate])

 return (
        <form onSubmit={handleSubmit(handleSave)}>
         <Controller
        name={name}
        control={control}
        render={({ field: { value, onChange }, fieldState: { error } }) => {
          return (
            <FormControl variant='standard' fullWidth sx={sx} error={!!error?.message}>
              <InputLabel shrink htmlFor={`custom-input${name}`} error={!!error?.message}>
                <Typography variant={'h6'}>{label}</Typography>
              </InputLabel>
              <BootstrapInput
                id={`custom-input${name}`}
                ref={ref}
                placeholder={placeholder}
                value={value || ''}
                onChange={onChange}
                error={!!error?.message}
                fullWidth
                inputProps={{
                  onInput: handleInput,
                }}
                disabled={disabled}
              />
              {!!error?.message && (
                <FormHelperText sx={{ color: 'red' }}>{error?.message}</FormHelperText>
              )}
            </FormControl>
          )
        }}
      />
         <button type="submit">Save</button>
       </form
)
}