Elementor mobile/tablet menu items don’t differentiate between clicking on the main menu item and the dropdown arrow – how to fix?

This is the structure of my main menu – different main items that link to separate pages and also have their own submenus:

When I first click on the item, no matter if it’s the default dropdown arrow or the name of the main item/main page, it reacts as if the dropdown submenu is being opened. And when I click on it again, it reacts as if I’m opening the page that’s also the main item of the dropdown (so, About Us, Service Area etc.), leaving me no option to open the main page (with the first click) or to otherwise close the dropdown menu (with the second click).

I tried to use the Inspector and write a JS code that would differentiate between the two, but it hasn’t been working properly. I added it to Elementor Custom Codes, the section:

<script>
document.addEventListener('DOMContentLoaded', function () {
var submenuToggles = document.querySelectorAll('.elementor-nav-menu .sub-arrow');

for (var i = 0; i < submenuToggles.length; i++) {
    submenuToggles[i].addEventListener('click', function (e) {
        e.stopPropagation();
        e.preventDefault();

        var submenu = this.parentElement.querySelector(
            '.elementor-242 .elementor-element.elementor-element-bc7c611 .elementor-nav-menu--dropdown .elementor-sub-item'
        );

        if (submenu) {
            submenu.classList.toggle('active');
        }
    });
}
});
</script>

I’m including screenshots of the Inspector tools. This would be the arrow:

And this would be the text:

Could someone please help me out?