[React] Error when using Popover

[DevMude]

Use Version Packages:

"@headlessui-float/react": "^0.12.0",
"@headlessui/react": "^1.7.17",
"react": "^18.2.0",
"typescript": "^5.2.2",
"@types/react": "^18.2.33",
"@types/react-dom": "^18.2.14",
"next": "13.5.6",

Describe the bug Using nextjs, create a src/pages/test.tsx file:

import { Float } from '@headlessui-float/react'
import { Popover } from '@headlessui/react'
import { FC } from 'react'

const Test: FC = () => {
  return (
    <Popover>
      <Popover.Button>Click me</Popover.Button>
      <Float>
        <Popover.Panel>
          <div>Panel</div>
        </Popover.Panel>
      </Float>
    </Popover>
  )
}

export default Test

Results in a type error on Popover.Panel element:

Type 'Element' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>[] | ((slot: FloatReferenceRenderProp) => ReactElement<any, string | JSXElementConstructor<...>>[])'.ts(2322)

float.d.ts(59, 5): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & FloatProps & RefAttributes<ElementType<any>>'

Loading the page results in a runtime error:

Server Error
TypeError: (intermediate value)(intermediate value)(intermediate value) is not iterable

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
eval
node_modules/@headlessui-float/react/dist/headlessui-float.mjs (1095:41)
renderWithHooks
file:///Users/username/sites/tcmf/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5658:16)
renderForwardRef
file:///Users/username/sites/tcmf/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5842:18)
renderElement
file:///Users/username/sites/tcmf/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6005:11)
renderNodeDestructiveImpl
file:///Users/username/sites/tcmf/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///Users/username/sites/tcmf/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
file:///Users/username/sites/tcmf/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderChildrenArray
file:///Users/username/sites/tcmf/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6211:7)
renderNodeDestructiveImpl
file:///Users/username/sites/tcmf/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6141:7)
renderNodeDestructive
file:///Users/username/sites/tcmf/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
file:///Users/username/sites/tcmf/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderHostElement
file:///Users/username/sites/tcmf/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5642:3)
renderElement
file:///Users/username/sites/tcmf/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5952:5)
renderNodeDestructiveImpl
file:///Users/username/sites/tcmf/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///Users/username/sites/tcmf/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "paths": {
      "*": ["./src/*"],
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

[ycs77]

Hi @DevMude, please put the button and panel both into <Float>:

<Popover>
  <Float>
    <Popover.Button>Click me</Popover.Button>
    <Popover.Panel>
      <div>Panel</div>
    </Popover.Panel>
  </Float>
</Popover>