How to validate email addresses in Blueprint JS TagInput?

Question

I'm trying to do an email sending form which accepts multiple email addresses as a receiver (to address), I'm using Blueprintjs TagInput for that. I want there to be an error message or perhaps an Intent.DANGER on the tag if the entered email address doesn't validate. Kind of like this

<Controller
          control={control}
          name='toAddresses'
          rules={{required: t('emails.form.to.required') ?? ''}}
          render={({
            field: {onChange, ref, value}, fieldState: {error},
          }) => {
            const intent = error ? Intent.DANGER : Intent.NONE;
            return (
              <FormGroup
                labelInfo='(required)'
                helperText={error?.message}
                intent={intent}
                label={t('emails.form.to.title')}
              >
                <TagInput
                  large
                  addOnBlur
                  addOnPaste
                  inputRef={ref}
                  intent={intent}
                  placeholder={t('emails.form.emailPlaceholder') ?? ''}
                  values={value}
                  tagProps={{interactive: true}}
                  onChange={onChange}
                />
              </FormGroup>
            );
          }}
        />

This is what I have right now without any validation. I've tried to add to the Controller rules with the pattern, but it doesn't apply to the tags (or spans actually in the input field). If I have just an InputGroup with one string value, then it works.

I think I should try something with onAdd or onChange, but I have no ideas right now how to implement that.