Tabs Component Accessibility - aria-controls Value Issue in React 17

[helmisatria]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.7.17

What browser are you using?

Chrome, Edge

Reproduction URL

• https://stackblitz.com/edit/vitejs-vite-v6gywx?file=src%2FApp.tsx,package.json,src%2Fmain.tsx,src%2FApp.css&terminal=dev

Steps to Reproduce:

• Use the Tabs component in a React 17 project.
• Observe the aria-controls attribute of the tab buttons.

Describe your issue

I've encountered an issue with the Tabs component from the @headlessui/react where the tab's aria-controls value is set incorrectly (id is undefined) when used with React 17. This issue seems to be specific to React 17 and does not occur in React 18.

Screenshots:

[RobinMalfait]

Hey!

This has been fixed by #2883 and will be available in the next v1.7 release.