react-router-dom correct way to use Routes and useParams

I have root Routes:

<Routes>
    {props.isAuthenticated === false && (
        <>
            <Route path="/" element={<Auth />} />
            <Route path="/auth" element={<Auth />} />
            <Route path="/external-auth-redirect" element={<ExternalAuthRedirect />} />
        </>
    )}
    {props.isAuthenticated && (
        <>
            <Route path="/" element={<GroupCenter />} />
            <Route path="/account-settings/*" element={<AccountSettings />} />
            **<Route path="/group-center/*" element={<GroupCenter />} />**
        </>
    )}
    <Route path="/cli-auth" element={<CliAuth />} />
    <Route path="/cli-authenticated" element={<CliAuthenticated />} />
    <Route path="/not-found" element={<NotFound />} />
    <Route
        path="*"
        element={props.isAuthenticated === null ? null : <Navigate replace to="/not-found" />}
    />
</Routes>

Then, in GroupCenter component, I have nested Routes:

        <div className={classes['container']}>
            <Nav />
            <div className={classes['content']}>
                <SideBar groups={props.sideBarGroups} />

                <Routes>
                    <Route
                        path="/new"
                        element={<NewGroup onAddGroupToSideBar={props.onAddGroupToSideBar} />}
                    />
                    **<Route
                        path="/:groupId/*"
                        element={<GroupDetails onRemoveGroupFromSideBar={props.onRemoveGroupFromSideBar} />}
                    />**
                </Routes>
            </div>
        </div>

Then, in GroupDetails I have another nested Routes:

        <main className={classes['main']}>
            <Header groupLabel={props.group.label} groupId={props.groupId} />

            <Routes>
                <Route path="policies" element={<div>&nbsp;</div>} />
                <Route path="history" element={<div>&nbsp;</div>} />
                <Route path="settings" element={settingsComponent} />
                <Route path="/" element={<Navigate to="policies" replace />} />
            </Routes>
        </main>

Now, in SideBar component, which was inside GroupCenter component as you can see in the 2nd snippet code,

I do the following (while being the url: http://localhost:8080/group-center/63289576bef19ef2c5eacb93/settings:

    const params = useParams<{ readonly '*': string }>();

    console.log(params);

I see the result:

Object { "*": "63289576bef19ef2c5eacb93/settings" }

It's really "ugly". I expected to get a key like groupId with only the identifier value, without the settings. Where am I wrong?