React-Router-Hash Link: How to update the links seen at the top when scrolling through a single webpage?

Question

I have this application where it only has one page. Clicking on the navigation does go to the correct section of the webpage. However, how can I update the link seen at the top of the navigation when scrolling through the webpage? As of now, the active link does not update when you scroll through other sections. You first need to really click on it for the active links to be updated.

I recreated the problem here: https://codesandbox.io/s/modest-water-8hwmjz?file=/src/App.js

codes:

  const { hash } = useLocation();
  const isActive = (iHash) => hash === iHash;

                 <Link
                    to={page.link}

                    smooth
                  >
                    <Typography
                      style={
                        isActive(`${page.link}`)
                          ? {
                              color: "red",
                            }
                          : { color: "black" }
                      }
                    >
                      {page.title}
                    </Typography>
                  </Link>