You cannot change <Router history>

[kristian2x]

I am getting the following warning and hot-reloading is broken since implementing piwik-react-router:

backend.js:6 Warning: You cannot change Router history

This is my App.js where I call connectToHistory()

import React, { Component } from "react";
import PropTypes from "prop-types";

import { withRouter, Router, Switch, Route } from "react-router-dom";
import { createBrowserHistory } from "history";
import { library } from "@fortawesome/fontawesome-svg-core";
import MatomoTracker from "piwik-react-router";

import {
...
} from "@fortawesome/free-solid-svg-icons";
import { Button } from "react-bootstrap";
import { bootstrapUtils } from "react-bootstrap/lib/utils";
import { hot } from "react-hot-loader";

import Login from "./pages/login/Login";
import Main from "./Main";
import ProtectedRoute from "../routes/ProtectedRoute";

library.add(
...
);

bootstrapUtils.addStyle(Button, "ace");

export const matomo = MatomoTracker({
  url: "analytics.ace",
  siteId: 1
});

class App extends Component {
  render() {
    let history = createBrowserHistory();
    if (process.env.mode === "production") {
      history = matomo.connectToHistory(createBrowserHistory());
    }
    // We need this as long as react-router-bootstrap is not updated
    // to be compatible with react-router-bootstrap v5
    // see for more info: https://github.com/react-bootstrap/react-router-bootstrap/issues/250
    const RouterContextProvider = withRouter(
      class extends React.Component {
        static childContextTypes = {
          router: PropTypes.object
        };

        getChildContext() {
          const { children, ...router } = this.props;
          return { router };
        }

        render() {
          return this.props.children;
        }
      }
    );

    return (
      <>
        <Router history={history}>
          <RouterContextProvider>
            <Switch>
              <Route component={Login} exact path="/login" />
              <ProtectedRoute component={Main} path="/" />
            </Switch>
          </RouterContextProvider>
        </Router>
      </>
    );
  }
}

export default hot(module)(App);

What could be causing this? Let me know if you need any other info.