Autofill Input Value using a JS Script on React websites

I’m having troubles with an autofill JS script. The script is simple and it works well, it’s supposed to fill in some credentials for two input fields, username and password (using jQuery(selector).val(..)). The issue I’m struggling with is that on some websites (I observed that they are developed in React) the fields are filled but after pressing the “Log In” button, it says that they are empty. If you edit just a character of those fields the state is updated and after pressing "Log In" again it works.

The question is how can I change my script in order to update the internal state of the fields?

Here is the JS, a video and a website example.

Website: https://www.abcya.com/

JS Script function:

function handleInput(selector, value) {
    console.log('handleInput ' + selector + ' value = ' + value);
    console.log('starting to check availability for handle Input');
    if (isAvailable(selector) && value !== 'null') {
        jQuery(selector).val(value);
        if (jQuery(selector).val() === value) {
            jQuery(selector)[0].dispatchEvent(new Event('input', { bubbles: true }));
            jQuery(selector)[0].dispatchEvent(new Event('blur'));
        }
   }
}

function isAvailable(selector) {
    console.log('isAvailable ' + jQuery(selector).length + " || " + jQuery(selector).is(':visible'));
    return jQuery(selector).length > 0 && jQuery(selector).is(':visible');
}

Video: https://drive.google.com/file/d/1xUAtimCZWPAfTxhiipQPVXVO3_GHOgSo/view