React warning `Warning: Function components cannot be given refs.` and wrong visual placement of combobox options, when using `as={React.Fragment}` alongside Framer Motion's `motion.div` and `AnimatePresence` for immediate comboboxes

[augustl]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

2.1.2

What browser are you using?

Firefox

Reproduction URL

https://codesandbox.io/p/devbox/cool-moon-x4447s

Describe your issue

The reproduction above sets up the following scenario:

• A Combobox with immediate
• The child of Combobox is a function, in order to access the open property
• AnimatePresence and motion.div from Framer Motion is used to animate the appearance of the ComboboxOptions
• The as of ComboboxOptions is a React.Fragment, in order to have full control of property shadowing on ComboboxOptions vs motion.div

The documentation for "Animating with Framer Motion" shows how to use a function child, read the open property, and combine that with AnimatePresence and motion.div to animate the appearance and disappearance of the combobox options.

https://headlessui.com/react/combobox#animating-with-framer-motion

This does not seem to combine with the approach proposed in #3333. Version 2.1.2 added a transition property to ComboboxOptions that shadows the transition property of motion.div. To solve this shadowing, we can set the as of the ComboboxOptions to a Fragment, and manually render the motion.div as the immediate child of ComboboxOptions. However, that results in the issue reproduced in the codesandbox above, where a React warning is triggered, and the visual placement of the combobox options box is wrong.