How to integrate Google Tag Manager with a React App?

The technical specifications for this projects is ExpressJS & ReactJS.
This is used as an Browser Extension.
I am using 'react-gtm-module' for implementing Google Tag Manager.

import React, { Component } from "react";
import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
import Landingpage from "./components/Landingpage.js";
import Landingpagetest from "./components/Landingpagetest.js";
import Ad from "./components/Ad.js";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import TagManager from 'react-gtm-module';
import Referral from "./components/Referral";
import OnInstall from "./components/OnInstall";

const tagManagerArgs = {
  gtmId: 'GTM-P5Q5Q84'
}
TagManager.initialize(tagManagerArgs)

class App extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/"></Route>
          <Route path="/tabbing" component={Landingpage} />
          <Route path="/test" component={Landingpagetest} />
          <Route path="/ads" component={Ad} />
          <Route path="/:id" component={Referral} />
          <Route path="/oninstall" component={OnInstall} />
        </Switch>
      </Router>
    );
  }
}

export default App;

So after adding the tag-manager its expected to fire the tag manager on this url OpenTabs Extension.
However the tag manager doesn't fires on this page, checked using Tag Assistant Legacy(by Google)
The tag manager starts firing if I first hit the Record Tag Assistant Legacy on OpenTabs Website, now If I hit Record for OpenTabs Extension, the respective Tag shows up.

What is the implementation issue here?