Using WPT with react-hook-forms

Support
1

I am having an issue using either WPT commands or vanilla JS to automate form submission. This form uses react-hook-forms to handle the input. Unfortunately, even when I force the onChange event to fire and fill in the value, the component cannot use that value.

var input = document.querySelectorAll("input[name=email]")[0]; 
input.dispatchEvent(new Event('focus', { 'bubbles': true }))
input.value = "me@mycompany.com";

This is because the component is actually a wrapper from a MUI element:

<TextInput
                            id={LOGIN_FIELD.email}
                            name={LOGIN_FIELD.email}
                            label={LOGIN_PAGE.labels.email}
                            control={control}
                            customValidate={{
                                email: formValidator.emailFormat,
                            }}
                            maxLength={100}
                            isRequired={true}
                            errors={errors}
                        />

…and the component passes a control:

const {
        handleSubmit,
        control,
        formState: { errors, isSubmitting } = {},
    } = useForm({
        mode: FORM_MODE.onTouched,
        defaultValues: defaultValues,
    });

Because of this, the default values are overwritten when I try to submit.

Does anyone have experience getting WPT to work with this?