[DropdownMenu] Using asChild on <DropdownMenu.Item> throws React.Children.only error

[decanTyme]

I have a component that does a simple thing:

<DropdownMenu.Item asChild>
  <Flex justify="center" align="center" gap="4" py="6" mb="-1">
    <Avatar
      src={profile.picture}
      alt={profile.username}
      fallback={profile.username[0]}
      size="4"
      radius="full"
    />
    <Text size="3" weight="bold">
      {profile.username}
    </Text>
  </Flex>
</DropdownMenu.Item>

The problem is it throws:

After hours of digging, I tracked it down to this specific line of code

themes/packages/radix-ui-themes/src/components/dropdown-menu.tsx

Line 140 in b469845

{shortcut && <div className="rt-BaseMenuShortcut rt-DropdownMenuShortcut">{shortcut}</div>}

And the <DropdownMenuPrimitive.Item> children becomes essentially a children array [{…}, undefined] that this line will check and throw
https://github.com/radix-ui/primitives/blob/660060a765634e9cc7bf4513f41e8dabc9824d74/packages/react/slot/src/Slot.tsx#L72

Sure enough commenting it out seems to fix the problem.

I'm not familiar with RadixUI internals so I would appreciate any help with this if I'm even doing this right. The only other thing to note is that it somehow worked with Create React App, which I'm trying to migrate off of to Vite which now has this problem.