Protected page with Reactjs

Routes.js

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "./Home";
import Login from "./Login";
import MySpace from "./MySpace";
import ProtectedRoute from "./ProtectedRoute";
import Navigation from "./Navigation";
import AuthProvider from "./AuthContext";

export default function Routes() {
  return (
    <Router>
      <AuthProvider>
        <Navigation />
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/login">
            <Login />
          </Route>
          <ProtectedRoute exact path="/my-space">
            <MySpace />
          </ProtectedRoute>
        </Switch>
      </AuthProvider>
    </Router>
  );
}