Not able to update the checkmark(indicator) on navbar on scroll in nextjs TailWindCSS

Question

My navbar has three links gender, score, and company. When I click on the gender, the page navigates to the gender section of the page and the same for score and company, and the checkmark updates on the specific link. I want to update the checkmark(indicator) of each link when I scroll down to each section of the page. For eg: When I scroll to the score section, the checkmark (indicator) should automatically update on the score link in the navbar.

const [y, setY] = useState("");

const handleScroll = () => {
  setY(window.scrollY);
};

useEffect(() => {
  window.addEventListener("scroll", handleScroll); 
  return () => window.removeEventListener("scroll", handleScroll);
});