Is there a better solution for these problem?

 const [active, setActive] = React.useState(["active", "", "", "", ""]);``your text``

const hrefs = React.useMemo(
    () => ["/", "/about", "/skills", "/projects", "/contact"],
    []
  );

  React.useEffect(() => {
    setInterval(() => {
      const currentPath = window.location.pathname;``your text``
      const newActive = ["/", "/about", "/skills", "/projects", "/contact"].map(
        (href, index) => (currentPath === href ? "active" : "")
      );
      setActive(newActive);
    }, 0);
  }, []);

**
here in this react app, the header is constant and i am moving between pages through routing i am trying to make the list item that the page is on to have the classname active , tried so many ways but this was the only one i could find`your text.**