How to automatically push button after mouse is (automatically) hovering on it

Question

I am building a bigger application in React, JavaScript and HTMLusing Visual Studio Code. I am using a third party router to log-in inside a small robot I built. This robot will turn on using a relay which is triggered by a combobox and a related button which will apply the combobox choice. Also I am new to JavaScript and HTML and for this reason I learned how to deploy a website and I prepared a minimal verifiable example which can be found here https://comboboxtest.netlify.com/ and here you can also get the source code if needed.

The goal of the application after I launch Visual Studio will be:

1) log-in inside the router,

2) automatically trigger the combobox and

3) automatically apply the combobox choice using the Apply button.

For better showing this see print screen below:

The problem: In order to access to the router there is an external interface that I didn't write because is from the router. I navigated through the interface and arrived to the Apply button as shown below in the HTML code:

So the operations are the following:

1) I trigger the relays using the combobox

2) using the mouse I have to hover on the Apply button

3) After the mouse is on the button (button hovered) I can click and apply the choice

4) The choice should be confirmed by the statement to become green.

What is not working: I can trigger the combobox, but I am not able to atomatically hover and click on the apply button.

Below the most important part of the code I am using:

property string get_relay_comboBox: "
      var comboBox = document.getElementsByName('859-2-2')[0];
      // find a target element.
      if (comboBox) {
        // Add event listener for combobox
        comboBox.addEventListener('change', function (e) {
          console.log('Change event detected:', e);
        });
        // Get new option index by flipping the current selected index
        var newIdx = (comboBox.selectedIndex + 1) % 2;
        // set the new index
        comboBox.selectedIndex = newIdx;
        // fire change event
        comboBox.dispatchEvent(new Event('change'));
      }
      else {
        console.error('comboBox not found!');
      }
    ";

property string applyBtn: "
    function fun('btnb btnhov') {
      document.getElementById('btn_Apply').click();
    }
";

What I tried so far

1) I research for a while the problem and I found this and also the following post which helped to understand how to trigger the combobox.

2) I right clicked on the router interface right on the Apply button and opened the Inspect Element menu and went to the Show DOM properties I found that maybe the following sreen-shot could be useful:

3) This I used to understand the HTML part and in fact I understood that it is important the way components should be called but still could't figure out how to accept the choice of the combobox using the button.

4) Following this source which is the basic way to call a clicked event I simply applied it as it is possible to show it below:

    function fun('btnb btnhov') {
      document.getElementById('btn_Apply').click();
    }

But I didn't work and I think that at this point the most important problem as explained would be how to detect a mousover event and after that, push the button. How to do that?

EDITS

I also tried to rewrite the function in the following way:

property string applyBtn: "
    var btnApply = document.getElementById('btn_Apply');
    if(btnApply) {
        // Try add event listener for button
        btnApply.addEventListener('change', function(e) {
            console.log('Change event detected:', e);
        });
      // Push button
      // Here the button should be pushed (or hovered first????)
    }
    else {
        console.error('btnApply not found!');
    }
";

Thanks to anyone who could please guide to the right direction to solving this problem.