Let me explain what my code does first. In mn there are some elements and whenever I hover the element inside it, it will add the active class (basically just change the text's color and leave the color there until I hover another element).

When I click the img which is just the logo, I expect it will remove the active class, but I don't know how to make the function, my problem is the mn is an array so I gotta iterate and make a condition or something that I don't really get the idea.

Can anyone help me? thanks before, appreciate any kinda helps

useEffect(() => {
    const mn = document.getElementsByClassName("mn");
    const logo = document.querySelector(".hd-left");
    const img = logo.getElementsByTagName("img")[0]; 

    Array.from(mn).forEach(
      (el) => {
        if (el.innerText === menuSelected.name) {
          el.classList.add("active");
        } else {
          el.classList.remove("active");
        }
      } 
    ); 
  });