[Bug v1.6.0] Popover doesn't receive Fragment as value of the 'as' prop

[alissaVrk]

What package within Headless UI are you using?
@headlessui/react

What version of that package are you using?
v1.6.0

What browser are you using?
Chrome

Reproduction URL
https://codesandbox.io/s/headless-ui-switch-forked-3oycet?file=/src/App.js

Describe your issue
Setting Fragment in the 'as' prop of the Popover worked in v1.5.0 and stopped working in v1.6.0, saying that you pass a ref to the Fragment.

This isn't very good, since there is no good reason for me to wrap a button with a div

I have a workaround, not a pretty one:

import { forwardRef, Children, Fragment } from 'react';

export const ForwardRefToFirstFragment = forwardRef(({ children, ...props }, ref) => {
  const [firstChild, ...rest] = Children.toArray(children);
  //@ts-ignore
  const childWithRef = cloneElement(firstChild, { ref });

  return (
    <Fragment {...props}>
      {childWithRef}
      {rest}
    </Fragment>
  );
});

<Popover as={ForwardRefToFirstFragment}>
        <Popover.Button>CLICK ME</Popover.Button>
        <Popover.Panel>this is our floating content</Popover.Panel>
</Popover>

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This should be fixed by #1465, and will be available in the next release.

You can already try it using npm install @headlessui/react@insiders.

Here is an updated CodeSandbox with the latest insiders version: https://codesandbox.io/s/headless-ui-popover-with-fragment-forked-o9teuf?file=/src/App.js

[alissaVrk]

amazing, thank you very much :)