I am using react router v6 and trying to nest routers to switch only a particular div of the page.

I tried doing this

<div className="user-profile-page">
    <div className="user-profile-page-background">
        <img className="full-img" src = {user.profile_picture_url} />
    </div>
    <div className = "user-profile-contents-container">
        <h1 className="user-profile-name ellipsis">{user.full_name} ({user.age})</h1>
        <div className = "user-profile-nav">
            <NavLink to = "" className={(state)=>!state.isActive?"user-profile-nav-item":"user-profile-nav-item user-profile-nav-item-active"}>
                About
            </NavLink>
            <NavLink to = "pictures" className={(state)=>!state.isActive?"user-profile-nav-item":"user-profile-nav-item user-profile-nav-item-active"}>
                Pictures
            </NavLink>
        </div>
        <div className = "user-profile-contents-main">
            <Routes>
                <Route index={true} element = {<UserProfileAbout />} />
                <Route path = "pictures" element =  {<UserProfilePictures />} />
            </Routes>
        </div>
    </div>
</div>

but when I go to "/user/pictures" instead of just changing the contents inside "user-profile-contents-main" div. It changes the whole page.

Here is my main router

<Routes>
    <Route path = "/" element = {<HomePage /> } />
    <Route path = "/message/:uid" element = {<ChatPage />} />
    <Route path = "/user/:uid" element = {<UserProfilePage />} />
</Routes>

EDIT

all i had to do was

<Routes>
    <Route path = "/" element = {<HomePage /> } />
    <Route path = "/message/:uid" element = {<ChatPage />} />
    <Route path = "/user/:uid/*" element = {<UserProfilePage />} />
</Routes>

add /* in the route path