Protected Routes in React Router DOM v6

Question

I am following a guide published by Auth0 on setting up their user authentication in React. https://auth0.com/blog/complete-guide-to-react-user-authentication/#Calling-an-API

In their example which uses react-router-dom version 5, they have a ProtectedRoute component.

ProtectedRoute.js

const ProtectedRoute = ({ component, ...args }) => (
  <Route
    component={withAuthenticationRequired(component, {
      onRedirecting: () => <Loading />,
    })}
    {...args}
  />
);

export default ProtectedRoute;

This component is then used in their App component.

App.js

const App = () => {
  const { isLoading } = useAuth0();

  if (isLoading) {
    return <Loading />;
  }

  return (
    <div id="app" className="d-flex flex-column h-100">
      <NavBar />
      <div className="container flex-grow-1">
        <Switch>
          <Route path="/" exact component={Home} />
          <ProtectedRoute path="/profile" component={Profile} />
          <ProtectedRoute path="/external-api" component={ExternalApi} />
        </Switch>
      </div>
      <Footer />
    </div>
  );
};

export default App;

Unfortunately, this route does not work with react-router-dom version 6.

I understand that the Switch component has been replaced by Routes.

I'm not sure how the ProtectedRoute components should be changed though.