Setting input value in modern experience with javascript

Question

I'm trying to automate the adding of a list entry in sharepoint online lists with modern UI and plain JS. Setting the value works fine using:

// Stolen from StackOverflow ;)

const inputTypes = [
    window.HTMLInputElement,
    window.HTMLSelectElement,
    window.HTMLTextAreaElement,
];

const triggerInputChange = (node, value = '') => {

    // only process the change on elements we know have a value setter in their constructor
    if ( inputTypes.indexOf(node.__proto__.constructor) >-1 ) {
        const setValue = Object.getOwnPropertyDescriptor(node.__proto__, 'value').set;
        setValue.call(node, value);
        node.dispatchEvent(new Event('input', { bubbles: true }));
        node.dispatchEvent(new Event('change', { bubbles: true }));
    }
};


var elem;
elem = document.querySelector('input[aria-label="Required Filed „Title“, empty, Field editor. "]');
if(elem) {
   triggerInputChange(elem, "Hello World!");
}

Sadly if you try to submit the form the validation fails with "Field can not be empty" (even though it is set!) I tried to raise every event I could think of but with no success.

By clicking on safe the browser jumps back to that field, if you click save again it validates correctly without having done any change. O_o

Does anyone know how to input a value into a lists form and trigger the validation/input events correctly?

Thank you in advance! :)