ProtectedRoutes in reactjs cannot be used inside Routes?

Question

I am working with routes. I have created a protected route which should redirect me to 'https:localhost:3000/' basically the homepage when successfully logged in.

app.js

import React from 'react';
import Login from './components/Auth/Login'
import Register from './components/Auth/Register'
import Chat from './components/Chat/Chat'
import ProtectedRoute from './components/Router/ProtectedRoute'


import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
function App() {
  return (
    <Router>
      <div className="App">
        <Switch>
          <ProtectedRoute exact path='/' component={Chat} />
          <Route path='/login' component={Login} />
          <Route path='/register' component={Register} />
          <Route render={() => <h1>404 page not found</h1>} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

protectedRoutes.js

import React from 'react'
import { Route, Navigate } from 'react-router-dom'
import { useSelector } from 'react-redux'

const ProtectedRoute = ({ component: Component, ...props }) => {
  const isLoggedIn = useSelector(state => state.authReducer.isLoggedIn)

  return (
    <Route
      {...props}
      render={(props) => (
        isLoggedIn
          ? <Component {...props} />
          : <Navigate to='/login' />
      )}
    />
  );
}

export default ProtectedRoute

I think this problem is because of recent update in react.js. They might have changed some of the syntax which I cannot figure out. I did some research and found that Switch is replaced with Routes but then we cannot use something else other then Route in Routes.