Fetch new data on url change

I am working on a react app. So I have these components in my homepage

1. Sidebar
2. Sidebar Suggestions
3. Tags
4. Tags Suggestions

My Main Routing is like :

<Router>
    <Route path={["/", "/home", "/tags/:tagId"]} component ={Home}/>
</Router>

And my Home component is :

  <Router>
    <Sidebar {some Props} />

    <Switch>
      <Route
         exact
         path={["/", "/home"]}
         render={(props) => (
           <Suggestions {some props} />
         )}
      />
      <Route exact path="/tags/:tagId" component={TagsSuggestion} />
    </Switch>

    <Tags { some props}  />
  </Router>

So whenever I click on any data in Sidebar, I want Sidebar Suggestions to render

And Whenever I click on any tag in tags component, It will redirect to " /tags/:tagId " with the tag Id attached.

Problem : In the starting, the Sidebar suggestions are being shown and when I click on tags, the tags Suggestions component is loaded and the URL changes. But if I click the other tag, the component is not rendered and the suggestions are not changed and I have to reload the page manually to see the Tags Suggestions component.

My Tags Suggestion file is something similar to this smaller version

import React from "react";

class TagsSuggestion extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tag: null
    };
  }

  componentDidMount() {
    this.setState({ tag: this.props.match.params.id });
    
    // Here I fetch the data
  }

  render() {
    return <h3> This is Tag {this.state.tag} Suggestion</h3>;
  }
}

export default TagsSuggestion;

I know what is the problem. That the componentDidMount only executes once but are there any alternatives that will work and fetch the new data whenever a tag is clicked

Sandbox : https://codesandbox.io/s/unruffled-wave-v9m3r?file=/src/TagsSuggestion.js