React Router V6 update from v5 - Nested and Private Routes

Question

I am fairly new to react and typescript trying to update v5 react router I have the below code from v5

export const InternalRoute = () => {

const pathname = useLocation();
const state = useContext(context)

let url = URL_SignIN;
if state.currenturl {
url = state.currenturl;
}
return (
<Route
{
render={() => pathname === url ? (children) : 
        (redirect to = {{ pathname: url}}
/>
        )}/>)
            }

and in app.tsx

<switch>
<InternalRoute path = {url_Monitor_Sign_In>
   <MonitorSignInRoute/>
</InternalRoute>

In v6 nested routes wont work like this I tried referencing this article but I am running into errors with either an endless loop error or the path not working Any suggestions on how to implement this