In my App.js I have a number of components wrapped in a Switch component from react-router-dom

App.js

import React from "react";
import Loadable from "react-loadable";
import { Switch } from "react-router-dom";
import ProtectedRoute from "./ProtectedRoute";

const Test = Loadable({
  loader: () => import("./Test"),
  loading: () => <h1>LOADING....</h1>
});

const Test1 = Loadable({
  loader: () => import("./Test1"),
  loading: () => <h1>LOADING....</h1>
});

const Test2 = Loadable({
  loader: () => import("./Test2"),
  loading: () => <h1>LOADING....</h1>
});

const App = () => {
  return (
    <Switch>
      <ProtectedRoute bgColour="blue" exact path="/" component={Test} />
      <ProtectedRoute bgColour="red" exact path="/1" component={Test1} />
      <ProtectedRoute bgColour="green" exact path="/2" component={Test2} />
    </Switch>
  );
};

export default App;

The ProtectedRoute component renders a Route component from react-router-dom passing in the specified component. It also has a HOC, which in my actual application checks the user is authenticated

ProtectedRoute.js

import React from "react";
import { Route } from "react-router-dom";

const withAuth = (Component) => {
  return (props) => {
    return <Component {...props} />;
  };
};

const ProtectedRoute = ({ component, bgColour, ...args }) => {
  return (
    <div style={{ backgroundColor: bgColour || "transparent" }}>
      <Route component={withAuth(component)} {...args} />
    </div>
  );
};

export default ProtectedRoute;

For each component, I have alerts setup to trigger on mount and unmount of the component. On a click on an element it updates the query string to a random number via history.push, however, this currently triggers an unmount, due to the Switch added in App.js, without the Switch there is no unmount. This is causing an issue in my application as an unmount is not desired behaviour and is causing issues with loading the correct data.

Test.js

import React, { useEffect } from "react";
import { useHistory } from "react-router-dom";

export default function Test() {
  const history = useHistory();
  useEffect(() => {
    alert("MOUNTED BASE");
    return () => {
      alert("UNMOUNTED BASE");
    };
  }, []);
  return (
    <div>
      <h1>TEST COMPONENT BASE - BLUE</h1>
      <div
        onClick={() =>
          history.push({
            pathname: history.location.pathname,
            search: `?query=${Math.random().toFixed(2)}`
          })
        }
      >
        UPDATE QUERY STRING
      </div>
      <div onClick={() => history.push("/1")}>GO TO Next ROUTE</div>
    </div>
  );
}

I still want the functionality of the Switch but prevent the unmount on history.push, is this possible?

I have a CodeSandbox below to recreate this issue