[Vuejs]-How to configure vue 3 router children properly to have nested routes working as expected?

UserParent.vue

<template>
  <router-view />
</template>

router.js

routes: [
  {
    path: "/user",
    component: UserParent,
    children: [
      {
        path: "/",
        name: "user",
        component: User
      },
      {
        path: "/settings",
        name: "settings",
        component: Settings
      },
      {
        path: "/profile",
        name: "profile",
        component: Profile
      }
    ]
  }
]