Setting default sub-path in React Router DOM v6 Nested Routes

Question

I've my React Router DOM structure like this.

<Route path={routes.settings.index} element={<Settings />}>
<Route
  index
  path={routes.settings.profile}
  element={<ProfileSettings />}
/>
<Route
  path={routes.settings.schedule}
  element={<ScheduleSettings />}
/>
/Route>

and here's my routes object, that I'm using here.

settings: {
  index: "/settings",
  profile: "profile",
  schedule: "schedule",
},

Now, my main sidebar is mapped to /settings but I want the default route to be /settings/profile whenever someone visits /settings route.

Here's my Settings Layout, which is using Outlet component.

<Box sx={{ flex: 1, display: "flex", flexDirection: "column" }}>
  <Grid sx={{ flex: 1 }} gutter={40}>
    <Grid.Col span={2}>
      <Stack spacing={0}>
        {settingsPages.map((item, idx) => (
          <SidebarItem
            active={`/settings/${item.path}` === location.pathname}
            key={idx}
            label={item.label}
            icon={item.icon}
            path={item.path}
          />
        ))}
      </Stack>
    </Grid.Col>
    <Grid.Col span={10}>
      <Outlet />
    </Grid.Col>
  </Grid>
</Box>