using-react-hooks-in-iife.tsx

function App() {
  return (
    <>
      {(() => {
        const [isOpen, setOpen] = useState(false);
        return (
          <>
            <Button onClick={() => setOpen(true)}>First</Button>
            <Popover isOpen={isOpen} onOpenChange={setOpen}>
              ...
            </Popover>
          </>
        );
      })()}

      {(() => {
        const [isOpen, setOpen] = useState(false);
        return (
          <>
            <Button onClick={() => setOpen(true)}>Second</Button>
            <Popover isOpen={isOpen} onOpenChange={setOpen}>
              ...
            </Popover>
          </>
        );
      })()}

      {(() => {
        const [isOpen, setOpen] = useState(false);
        return (
          <>
            <Button onClick={() => setOpen(true)}>Third</Button>
            <Popover isOpen={isOpen} onOpenChange={setOpen}>
              ...
            </Popover>
          </>
        );
      })()}
    </>
  );
}