How to use GTM in ReactJS to track all pages upon user consent

I have designed a site in ReactJS and have a number of tracking tools and session cookies embedded. Therefore due to the legalisations I need to get user consent first before I can enable any form of tracking. Besides GTM, I have facebook, HotJar and so on.

I am using 'react-cookie-consent' to run the cookie banner. I have managed to control all other cookies/tracking tools by creating functions and only execute them once user has give the relevant consent. I have done the same for GTM however it does not seem to be working properly.

I have imported import TagManager from "react-gtm-module" into my cookie page and put the following code in a function which only runs if user presses accept.

const tagManagerArgs = {
  gtmId: "GTM-*******", // My GTMID
  dataLayerName: "PageDataLayer"
};
TagManager.initialize(tagManagerArgs);

and have pasted the following code in each page under componentDidMount() function and have imported import TagManager from "react-gtm-module" as well.

const tagManagerArgs = {
      dataLayer: {
        page: "home", //Specific to each page
        pagePath: "/home" //Specific to each page
      },
      dataLayerName: "PageDataLayer"
    };
    TagManager.dataLayer(tagManagerArgs);

The GTM is triggered once when the user presses the accept button and it appears it is only triggered for the page where the cookie consent banner is on and none of the other pages.

What I want is only when the user presses accept, to then enable the tracking on all pages.

Am I doing something wrong?

Update 01/11/2019 I am still waiting for an answer, not sure if I can repost the question and whether this edit bumps this post :)