How can I implement a protected route in react without errors?

I am building a protected route for my site. But i am getting an error when i run my code.

PRoute.js is below:

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


const PRoute = ({isAdmin,component:Component, ...rest}) => {


 const {isAuthenticated,loading,user} = useSelector(state=>state.auth)

 return (
            <Fragment>
                {loading === false && (
                    <Route
                        {...rest}
                        render = {props =>{
                            if(isAuthenticated === false){
                                return<Navigate to= '/login'/>
                            }

                            if(isAdmin === true && user.role !== 'admin'){
                                return <Navigate to ='/'/>
                            }

                            return <Component {...props} />

                        }}
                        />
                )}
            </Fragment>
        )
 }
 

 export default PRoute

once i assign the code above you as such: <PRoute path='/dashboard' element={<Dashboard />} /> , I get a blank white screen.

router.ts:5 Uncaught Error: [PRoute] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

is the error

Any input you share helps, thanks.