• Check if updating to the latest Preact version resolves the issue

Describe the bug
Using a controlled <Tab> component from @headlessui/react works as expected on preact 10.19.3, but on 10.9.4 - 10.9.6 you have to either do an extra click somewhere in the browser, or, if using a pointer device, move it out of the tab list button, in order for the correct tab panel to be shown.

(Even though there is a change in behavior when upgrading preact to 10.9.4, it could be that there is an underlying issue with @headlessui/react that surfaced with 10.9.4+ 🤔 )

To Reproduce

• Use preact 10.9.4-10.9.6 and @headlessui/react": "^2.0.0-alpha.3.
• Use alias react: "preact/compat".
• Use e.g. example from docs (https://headlessui.com/react/tabs#controlling-the-active-tab):

  import React from "react";
  import { Tab } from "@headlessui/react";
  
  export default function MyTabs() {
    const [selectedIndex, setSelectedIndex] = React.useState(0);
  
    return (
      <Tab.Group selectedIndex={selectedIndex} onChange={setSelectedIndex}>
        <Tab.List>
          <Tab>Tab 1</Tab>
          <Tab>Tab 2</Tab>
          <Tab>Tab 3</Tab>
        </Tab.List>
        <Tab.Panels>
          <Tab.Panel>Content 1</Tab.Panel>
          <Tab.Panel>Content 2</Tab.Panel>
          <Tab.Panel>Content 3</Tab.Panel>
        </Tab.Panels>
      </Tab.Group>
    );
  }

• Click on the different tab list buttons and see that tab panel is not in sync (unless double clicking or moving cursor out of list button).

Observable in Firefox, Chrome and Safari.

Expected behavior

Same behavior as in preact 10.9.3.