React Router v5 - element under nested route not displaying

I am working on a project that uses React Router v5. My component, HeatMapContainer, is rendered from within a Switch like this:

          <Switch>
            <Route path="/" exact component={LandingPage} />
            <Route path="/table" component={TablePage} />
            <Route path="/heatmap" component={HeatMapContainer} />
            <Route component={NotFoundPage} />
          </Switch>

I am attempting to create a nested Switch inside HeatMapContainer that will render different components based on the nested route. Inside HeatMapContainer I have this div:

      <div style={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
        HEAT MAP CONTAINER
        <Link to="/heatmap/all">All</Link>
        <Route path="/heatmap/all" element={<AllOfficesRoute />} />
      </div>

Here is the AllOfficesRoute component I want to see upon clicking the Link:

function AllOfficesRoute() {
  return (
    <div className="all-offices-route">
      ALL OFFICES
    </div>
  );
}

Currently, the Link works and pushes the right path [ /heatmap/all ] onto history, but no component shows up. I started trying absolute paths because I distrusted relative paths, but even absolute paths don't seem to work here. Any help understanding what I'm missing would be appreciated.