There is a very very simple approach with a few changes, and a more sophisticated one (laravel 12 as reference).

a) THE QUICK WAY

a1) edit: resources/types/navigation.ts:

add children as attribute recursive to NavItem

export type NavItem = {
title: string;
href: NonNullable<InertiaLinkProps['href']>;
    icon?: LucideIcon;
    isActive?: boolean;
    children?: NavItem[];
};

a2) edit NavMain.vue

AFTER the closing SidebarMenuButton but still inside SidebarMenuItem add

<SidebarMenuItem
                    v-for="child in item.children"
                    :key="child.title"
                >
                    <SidebarMenuButton
                        as-child
                        :is-active="isCurrentUrl(child.href)"
                        :tooltip="child.title"
                    >
                        <Link :href="child.href">
                            &nbsp;&nbsp;&nbsp;- <span>{{ child.title }}</span>
                        </Link>
                    </SidebarMenuButton>
                </SidebarMenuItem>

b) THE LONG WAY

b1) is the same as a1, extend the definition of NavItem to be able to have children

b2) use DeviP98 definition for a SidebarSubMenu Component or in it's effect you can duplicate and edit SidebarMenuItem

b3) The same: you can duplicate SidebarMenuButton and create a SidebarSubmenuButton to your liking

b3) extend NavMain as described above, with an loop inside SidebarSubmenuItem on NavItem.children and use SidebarSubmenuItem and SidebarSubmenuButton

With both approaches the NavItem definition is infitely recursive and and with some clever coding you could make the SidebarMenuItem recursive too to adapt to infinite depth (create a component which takes navItems, loops through and when it come to children you refer recursive to that component and pass the childrenNavItems)