JavaScript: Resizing laptop's browser window ("mobile"--"desktop"--"mobile") doesn't reboot menu state

I use latest Google Chrome and I have the following frontend code for a responsive navigation menu which I use in my WordPress website.

Clicking the .burger element makes adjacent .menu element to appear or disappear, in dropdown or dropup respectively.

My problem

1. We open a browser window <=959px and we open the mobile menu.
2. We resize the window to >=960px and then we resize back to <=959px.
3. We have to click the burger twice to close the menu, to then re-open it.

My question

Why do we need to click the burger twice in the given circumstances?

Code

document.addEventListener('DOMContentLoaded', ()=>{
    let clicks = 0;
    let menu = document.querySelector('#menu-primary');
    let burger = document.querySelector('.burger');
    let isMenuVisible = false;

    burger.addEventListener('click', ()=>{
      isMenuVisible = !isMenuVisible;
      menu.style.display = isMenuVisible ? 'block' : 'none';
    });

    let mobileBehavior = ()=>{
      menu.style.display = 'none';
    };

    if (window.innerWidth <= 959) {
      mobileBehavior();
    }

    window.addEventListener('resize', ()=>{
      if (window.innerWidth <= 959) {
        clicks = 1;
        menu.style.display = 'none';
      } else if (window.innerWidth >= 960) {
        menu.style.display = 'block';
      }
    });
});

.burger {
    display: block;
    text-align: center; color: var(--w);
    margin-bottom: 0 !important;
    font-weight: bold
}

#menu-primary { display: none }

@media screen and (min-width: 960px) {
    .burger { display: none }
    #menu-primary { display: block }
}

<div class="burger">BARS</div>

<ul id="menu-primary">
  <li>Homepage</li>
  <li>Contact_us</li>
</ul>

from JavaScript: Resizing laptop's browser window ("mobile"--"desktop"--"mobile") doesn't reboot menu state