unprotected and protected routes in react-router routerprovider

[navaniharsh31]

I had previously built an app using the old way of react-router in this way

App.jsx

if(auth){
    return <AppProtectedRoutes/>
}

return <AppUnprotectedRoutes/>

AppProtectedRoutes

<Routes>
    <Route path='/' element/>
    <Route path='/dashboard' element/>
<Routes>

AppUnprotectedRoutes

<Routes>
    <Route path='/login' element/>
    <Route path='/signup' element />
    <Route path='/onboard' element />
<Routes>

How do I convert these to the RouteObject so that authenticated users can only access Protected only and unauthenticated users can access Unprotected only?

Also since RouteProvider would be in the index.js file, what should App.js contain other than the main logic?

PS- I prefer splitting routes in multiple files