I was applying authenication in my project in React.js by using protectes routes. First i was using Redirect component from react-router-dom but then i have found out the changes they made in react-router-dom than i applied the navigate component.

import {BrowserRouter,Routes,Route,Navigate} from 'react-router-dom';
import './App.css';
import Navigation from './components/shared/Navigation/Navigation';
import Authenticate from './pages/Authenticate/Authenticate';
import Home from './pages/Home/Home';
import Login from './pages/Login/Login';
import Register from './pages/Register/Register';

const isAuth = true;

function App() {
  return (
    <div className="App">

    <BrowserRouter>

    <Navigation/>

    <Routes>
      <Route  exact path='/' element={<Home/>}></Route>
      {/* <Route exact path='/register' element={<Register/>}></Route>
      <Route exact path='/login' element={<Login/>}></Route> */}
      {/* <Route exact path='/authenticate' element={<Authenticate/>}></Route> */}
      <GuestRoute  exact path='/authenticate' element={<Authenticate/>}></GuestRoute>
    </Routes> 

    </BrowserRouter>
     
    </div>
  );
}

const GuestRoute = ({children,...rest}) =>{
  return(
    <Route {...rest} render = {({location})=>{
      return isAuth ?(
         <Navigate  to = '/rooms'state = {{from : location}} replace />
       ) 
       :(
         children 
       )
   
     }}></Route>
  )
  
}

export default App;

This is my code after using the navigate component my screen not showing any thing there must be some kind of logical error in it. Kindly help me to resolve this error.