I want to make a protected route for the admin dashboard. Sign-in and Sign-up routes are public. Before creating a protected route every route was working well. I created a component to create a private route. I replaced the route as a Private route and the page loads and terminal gives no error. But the page renders nothing and the console throws an error as the private route is not a route component. All children of routes must be a route or react. fragment.

Privet Route Component

import React from 'react'
import {Route} from 'react-router-dom'
const PrivateRoute = (props) => {
    return <Route {...props} />
}

export default PrivateRoute

App.js

import './App.css';
import {BrowserRouter , Routes ,Route} from 'react-router-dom'
import Home from './container/Home/Home'
import Signin from './container/Signin/Signin'
import Signup from './container/Signup/Signup'
import PrivateRoute from './components/HOC/privateRoute'
function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <PrivateRoute path='/' exact element={<Home/>}/>
          <Route path='/signin' element={<Signin/>}/>
          <Route path='/signup' element={<Signup/>}/>
          <Route/>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;