Render Autocomplete/ListBox with nested items

[J4v4Scr1pt]

I'm trying to render a AutoComplete where the items can be nested at any number of depth.
But the list just become a big mess. Tried writing different recursive methods, but no luck.
Because you need a AutocompleteItem, but an AutocompleteItem can't be displayed inside if another AutocompleteItem. For obvious reasons that's the case ofc. and its here some where I get lost.

This is my POC of the render method:

const renderNestedList= (item: Group, isChild?: boolean) => {
		if (isChild) {
			return (
				<Listbox>
					<AutocompleteItem
						textValue={item.Name}
						key={item.Id}
						classNames={{ base: 'cursor-default' }}
						hideSelectedIcon
						isReadOnly={true}
						endContent={<Checkbox size="sm" />}>
						{item.Name}
						{item?.Children.map((x) => renderNestedList(x, true))}
					</AutocompleteItem>
				</Listbox>
			);
		}
		if (item.Children.length > 0) {
			return (
				<AutocompleteItem
					key={item.Id}
					classNames={{ base: 'cursor-default' }}
					className="pl-4"
					hideSelectedIcon
					isReadOnly={true}
					endContent={<Checkbox size="sm" className="self-start" />}>
					{item.Name}
					{item?.Children.map((x) => renderNestedList(x, true))}
				</AutocompleteItem>
			);
		}

		return (
			<AutocompleteItem
				textValue={item.Name}
				key={item.Id}
				hideSelectedIcon
				classNames={{ base: 'cursor-default' }}
				isReadOnly={true}
				endContent={<Checkbox size="sm" />}>
				<span>{item.Name}</span>
			</AutocompleteItem>
		);
	};

Anyone tried to show a nested list in a Autocomplete or a listbox?

This is an example of the nested data list I want to show:

{
   "Name":"Test1",
   "Children":[
      {
         "Name":"Test!",
         "Children":[ ]
      },
      {
         "Name":"Test2",
         "Children":[
            {
               "Name":"Test",
               "Children":[]
            },
            {
               "Name":"Test3",
               "Children":[
                  {
                     "Name":"Test4",
                     "Children":[
                        {
                           "Name":"Test",
                           "Children":[ ]
                        },
                        {
                           "Name":"Test",
                           "Children":[
                              {
                                 "Name":"Test",
                                 "Children":[ ]
                              }
                           ]
                        }
                     ]
                  }
               ]
            }
         ]
      }
   ]
}