What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

@headlessui/react@2.2.9 together with vite@7.3.1 and @tanstack/react-router@1.166.3

What browser are you using?

Tested on Firefox 148.0 and Chromium 145.0.7632.116 on Fedora 43

Reproduction URL

https://github.com/ghferrari/headlessui-bug-reproduction.git

Describe your issue

When using @headlessui with Vite and TanStack Router, using the @headlessui Menu component with more than one child element causes the following error to be shown in the browser:

Passing props on "Fragment"!

The current component <Menu /> is rendering a "Fragment".
However we need to passthrough the following props:
  - data-tsd-source
  - data-headlessui-state

You can apply a few solutions:
  - Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".
  - Render a single element as the child so that we can forward the props onto that element.

To reproduce:

1. Run npm create vite@latest and specify React as the framework and TanStack Router as the variant. For reference, I select no toolchain or other dependencies.
2. In the new project, install @headlessui via npm install @headlessui/react.
3. Update src/routes/index.tsx to have this content:

import { createFileRoute } from '@tanstack/react-router'
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'

export const Route = createFileRoute('/')({ component: App })

function App() {
  return (
      <Menu>
          <MenuButton>My account</MenuButton>
          <MenuItems anchor="bottom">
              <MenuItem>
                  <a className="block data-focus:bg-blue-100" href="/settings">
                      Settings
                  </a>
              </MenuItem>
          </MenuItems>
      </Menu>
  )
}

4. Run the project via npm run dev and then open the site in the browser to see the error.

In the App() function above, <Menu> has two child elements, <MenuButton> and <MenuItems>. If <Menu> is used with just a single child element, then the bug does not happen.

As far as I can tell, the issue appears to be related to the use of Fragment as the default tag for Menu elements. When <Menu> has only a single child then any props passed to <Menu> are immediately forwarded to the single child. However, when two children are present, this auto-forwarding of props does not work.