This may be a really simple problem but I can't seem to find why this is happening. I'm trying to develop a SPA in vanilla js using webpack, so far I was able to implement routing with hashchange event and triggering rerendering. But when I tried to add an active class to the relevant link though when the hash changes, It doesn't work. But when I log to the console, it seems that class was added successfully, but in the HTML it doesn't get updated. Why is this?

this is my hashchange listener,

  window.addEventListener("hashchange", (e) => {
  const hash = window.location.hash.replace("#", "");
  const view = routes.find((route) => {
    return route.path == hash;
  });
  const links = document.querySelectorAll(".nav-list--link");
  app.render(view.name);
  links.forEach((l) => {
    const hashHref = l.getAttribute("href").replace("/#", "");
    if (hash === hashHref) {
      l.classList.add("active");
      console.log(l, l.classList);
    } else {
      l.classList.remove("active");
      console.log(l, l.classList);
    }
   });
 });

And this is the console output,

This is the HTML,

I don't understand why it doesn't update in the HTML if it's shown as updated in Javascript