Menu.Button does not receive id from props

[tolgaouz]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.7.4

What browser are you using?

N/A

Reproduction URL

https://codesandbox.io/s/gallant-brown-meqqw4?file=/src/App.js

Describe your issue

Originally, I saw this issue while using headless ui with Next 13, even though it's using useId hook to have consisten ids between server and client, I'm getting the following error:

Even though I'm passing an id in props, it's not receiving it correctly and using the auto generated id instead, I wasn't sure if this was intentional but even that's the case seems like Next 13 SSR is not playing well with the current useId implementation

<Menu as="div" className="relative ml-3">
        <div>
          <Menu.Button
            id="profile-dropdown"
            className="flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
          >
            <span className="sr-only">Open user menu</span>
            <Image
              className="h-8 w-8 rounded-full"
              height={32}
              width={32}
              src={user.picture || ''}
              alt="User Profile Picture"
            />
          </Menu.Button>
       </div>
</Menu>

[RobinMalfait]

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

I don't know exactly what we can do about the useId not producing the same value. That seems a bug in Next.js / React itself 🤔

That said, in #2060 we introduced a way so that you can override your id if passed, and will be available in the next release.

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