Mobile burger menu don't close after click

Question

I don't understand why my mobile menu doesn't close after clicking on menu's link. How can I fix this?

(() => {
  const menuButton = document.querySelector(".menu-button");
  const menuOverlay = document.querySelector(".menu-overlay");
  const items = document.querySelectorAll(".nav__item");

  menuButton.addEventListener("click", function () {
    menuButton.classList.toggle("active");
    menuOverlay.classList.toggle("open");
  });

  items.forEach((navItem) => {
    menuButton.classList.remove("active");
    menuOverlay.classList.remove("open");
  });
})();

HTML

<nav class="nav__items">
  <a class="nav__item" href="#about">
    About us
  </a>
  <a class="nav__item" href="#dogs">
    Available puppies
  </a>
  <a class="nav__item" href="#gallery">
    Gallery
  </a>
  <a class="nav__item" href="#testimonials">
    Testimonials
  </a>
  <a class="nav__item" href="#contacts">
    Contact us
  </a>
</nav>;

Answer 1

It should be something like that

(() => {
    const menuButton = document.querySelector(".menu-button");
    const menuOverlay = document.querySelector(".menu-overlay");
    const items = document.querySelectorAll(".nav__item");

    menuButton.addEventListener("click", function () {
        menuButton.classList.toggle("active");
        menuOverlay.classList.toggle("open");
    });

    items.forEach((navItem) => {
        navItem.addEventListener("click", () => {
            menuButton.classList.remove("active");
            menuOverlay.classList.remove("open");
        });
    });
})();