switch Route component prop to render prop

this change prevents component remounting, see
https://reacttraining.com/react-router/web/api/Route/render-func

src/App.tsx

@@ -18,9 +18,9 @@ const App: React.FC = () => {
       <AuthProvider>
         <CustomBrowserRouter>
           <div>
-            <Route exact path="/auth" component={AuthView} />
-            <PrivateRoute exact path="/" component={TablesView} />
-            <PrivateRoute path="/table/" component={TableView} />
+            <Route exact path="/auth" render={() => <AuthView />} />
+            <PrivateRoute exact path="/" render={() => <TablesView />} />
+            <PrivateRoute path="/table/" render={() => <TableView />} />
           </div>
         </CustomBrowserRouter>
       </AuthProvider>

src/util/PrivateRoute.tsx

@@ -1,15 +1,19 @@
 import React, { useContext } from "react";
-import { Route, Redirect } from "react-router-dom";
+import { Route, RouteProps, Redirect } from "react-router-dom";
 import AuthContext from "../contexts/authContext";
 
-const PrivateRoute = ({ component: RouteComponent, ...rest }: any) => {
+interface IPrivateRouteProps extends RouteProps {
+  render: NonNullable<RouteProps["render"]>;
+}
+
+const PrivateRoute: React.FC<IPrivateRouteProps> = ({ render, ...rest }) => {
   const { currentUser } = useContext(AuthContext);
   return (
     <Route
       {...rest}
       render={routeProps =>
         !!currentUser ? (
-          <RouteComponent {...routeProps} />
+          render(routeProps)
         ) : currentUser === null ? (
           <Redirect to={"/auth"} />
         ) : (