Why does React.js app not navigate to a div anchor?

Question

I have these routes:

const routes = [
    { name: 'Past Sales', link: '/#pastsales', activeIndex: 0 },
    { name: 'Who We Are', link: '/#whoweare', activeIndex: 1 },
    { name: 'Services', link: '/#services', activeIndex: 2 },
    { name: 'Contact Us', link: '/#contact', activeIndex: 3 },
];

And I create the navigation buttons like this:

  const tabs = (
    <React.Fragment>
      <Tabs
        value={value}
        onChange={handleChange}
        className={classes.tabContainer}
        indicatorColor='primary'
      >
        {routes.map((route, index) => (
          <Tab
            key={`${route}${index}`}
            className={classes.tab}
            component={Link}
            to={route.link}
            label={route.name}
          />
        ))}
      </Tabs>
    </React.Fragment>
  );

Yet, while the URL updates to the correct route (such as: localhost:3000/#pastsales) it doesn't update the view.

Lastly, here is my Route handlers:

function App() {
  const [selectedIndex, setSelectedIndex] = useState(0);
  const [value, setValue] = useState(0);

  return (
    <ThemeProvider theme={theme}>
      <BrowserRouter>
        <Header
          value={value}
          setValue={setValue}
          selectedIndex={selectedIndex}
          setSelectedIndex={setSelectedIndex}
        />
        <LandingPage />
        <WhoWeAre />
        <Services />
        <PastSales />
        <ContactUs />
      </BrowserRouter>
    </ThemeProvider>
  );
}

Do I need to make the above into?:

<Route path="/#whoweare' exact component={WhoWeAre} />