Site navigation for React web app

Support & Bugs
1

Hi, I have question regarding the tracking of a React webApp using Matomo Tag manager.
In the index.html I am using the Matomo Tag manager and in my Matomo board I have configured a Matomo Analytics tag to track the navigation in my React web App

I am using the https://www.npmjs.com/package/piwik-react-router package and, using react router 4, this is how the App.js file looks like

import React from "react";
import { BrowserRouter } from "react-router-dom";
import { createBrowserHistory } from "history";
import Root from "./Root";
import config from "./config";
const PiwikReactRouter = require("piwik-react-router");

const matomoSiteId = config.matomoSiteId ? config.matomoSiteId : 3;
const matomoUrl = config.matomoUrl ? config.matomoUrl : "";

function App() {
  const piwik = PiwikReactRouter({
    url: matomoUrl,
    siteId: matomoSiteId,
  });
  const history = createBrowserHistory();

  return (
    <BrowserRouter history={piwik.connectToHistory(history)}>
      <Root />
    </BrowserRouter>
  );
}

export default App;

However we I click on the links in the navigation bar, the page URL is not tracked.
As a check, I have created a HTML custom tag that fires with the same trigger used but the Matomo Analytics tag that would track the navigation. The custom tag works according expectation, but in the board I cannot see the different page URLs
Is there anything else I should do?