Adding routes inside a component in react router dom version 6

I am trying to migrate from react router 5 to react router 6. I coded a simple frontend where only if the login button is clicked you can go to the profile page. and inside profile page there are two links to view profile and edit profile.

//App.js
import './App.css';

import Header from './components/Header';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import Profile from './pages/Profile';
import NotFoundPage from './pages/NotFoundPage';
import Post from './pages/Post';
import GroupProfile from './pages/GroupProfile';

import {BrowserRouter as Router, Routes, Route, Navigate} from 'react-router-dom';
import {useState} from 'react';

function App(){
    const [login, setLogin] = useState(false);
    const [glogin, setGlogin] = useState(false);
    return(
        <div className="App">
            <Router>
                <Header />
                <button onClick={() => setLogin(!login)}> {!login?"Login":"Logout"} </button>
                <span> | </span>
                <button onClick={() => setGlogin(!glogin)}> {!glogin?"GroupLogin":"GroupLogout"} </button>
                <Routes>
                    <Route path='/' element={<HomePage />} />
                    <Route path='/about' element={<AboutPage />} />
                    {/*<Route path='/prof'>
                        {login ? <Profile />:<Navigate to='/' />}  Nope, in react_router_dom6 putting other things rather than function that returns pages are not valid
                    </Route>*/}
                    <Route path='/group' element={<GroupProfile g_login={glogin} />} />
                    <Route path='/prof/*' element={<Profile l_ogin={login} />} />
                        

                    <Route path='/post/:id' element={<Post />} />
                    <Route path='*' element={<NotFoundPage />} />

                </Routes>
            </Router>
        </div>
    )
}

export default App;

And these are groupprofile page and profile page.

GroupProfile.js

import React from 'react';
import {useEffect} from 'react';
import {useNavigate} from 'react-router-dom';

function GroupProfile({ g_login }){
    let nav = useNavigate();
    useEffect(() => {
        if (!g_login) {
            nav("/");
        }
    },[g_login, nav])  //you know useEffect hook, if dependancy list is given, when they change then hook will be triggered.

    return(
        <div>
            <p>This is the GroupProfile</p>
        </div>
    )
}

export default GroupProfile;

Profile.js

import React, {useEffect} from 'react';
import {Route, Routes, useRouteMatch, Link, useNavigate, useLocation} from 'react-router-dom';

import EditProfile from '../components/EditProfile';
import ViewProfile from '../components/ViewProfile';

/*
function Profile(){
    const { path, url } = useRouteMatch();
    //console.log(useRouteMatch());

    return(
        <>
            <h3>Profile Page</h3>
            <ul>
                <li><Link to={`${url}/viewprofile`}>View Profile</Link></li>
                <li><Link to={`${url}/editprofile`}>Edit Profile</Link></li>
            </ul>
            <Route path={`${path}/viewprofile`} component={ViewProfile} />
            <Route path={`${path}/editprofile`} component={EditProfile} />
        </>
    )
}
*/
function Profile({l_ogin}){
    let nav = useNavigate();
    let location = useLocation();
    //console.log(location)
    useEffect(() => {
        if (!l_ogin) {
            nav("/");
        }
    },[l_ogin, nav])  //you know useEffect hook, if dependancy list is given, when they change then hook will be triggered.
    return(
        <div>
            <h1>Congrats! you made it to the profile page mate...</h1>
            <ul>
                <li><Link to={`${location}/viewprofile`}>View Profile</Link></li>
                <li><Link to={`${location}/editprofile`}>Edit Profile</Link></li>
            </ul>
            <Routes>

                <Route path={`${location}/viewprofile`} element={<ViewProfile />} />
                <Route path={`${location}/Editprofile`} element={<EditProfile />} />
            </Routes>
        </div>
    )
}

export default Profile;

I have commented the Profile component that works in react router version 5 and it is supposed to navigate to /prof/viewprofile when View Profile link is clicked. ViewProfile.js and EditProfile.js are simple components

ViewProfile.js

import React from "react";

const ViewProfile = () => {
    return(
        <div>
            <h3><i>This is what you have to see in the profile.</i></h3>
        </div>
    )
}

export default ViewProfile;

The code I used in react router 5 works fine and when I clicked View Profile it navigates to /prof/viewprofile without any problem. But when I use react router 6 it doesn't navigate to /prof/viewprofile and it just stays in the /prof, but url changes to something like /prof/[object%20Object]/viewprofile. Can someone show me what am I doing wrong here?