Unable to change active Nav Color with Second navigation

I’m using spfx with react and have 2 types of navigation. One is using the navigation bar (which is working correctly) another is using down arrow icons present in each of the components. All the components are displayed one below the other.

The main .tsx file

<Router>
  <Route
    path="/"
    render={(props) =>
      <div>
        <Header />
        <Home {...props} />
        <Approach />
        <Contact />
      </div>
    } 
  />
</Router>

The header.tsx file uses BrowserRouter for routing-

<BrowserRouter>
  <div>
    {Nav.map((item) => {
      return <Link to={‘#${item.Title}’}>{item.Title}</Link>
    })}
  </div>
</BrowserRouter>

The main navigation works fine and the active tab gets highlighted correctly. I have down arrow icon on the Home component that scrolls down to the Approach component (Used react ScrollIntoView) and the arrow in Approach component scrolls to the Contact component. I'm unable to highlight the active tab when these arrows are getting clicked.