React hook form input is not listening to the DOM Event "change"

[binarykitchen]

While using the latest react-hook-form, I've got an external library modifying one of these inputs directly.

The DOM element's value is being set like that:

const keyInput = document.getElementById(...)
keyInput.value = videomailKey; // <--- Here, setting a value on the input

// Important so that any other JS framework can detect changes
keyInput.dispatchEvent(new Event("change", { bubbles: true }));

You see, I am dispatching the above INPUT change event via DOM and expect the react-hook-form to detect that change. But it doesn't. This is the code:

        <input
          required
          type="hidden"
          {...register("key", {
            required: true,
          })}
        />

It never reacts. Then when I change the event to "input" and add:

          onInput={() => {
            console.log("onInput");
            void trigger("key");
          }}

... to manually trigger the change, react-hook-form still does not recognise nor accept the change.

What am I missing?