hooks-separator.tsx

function HooksSeparator<T>({
  setup,
  children,
}: {
  setup: () => T;
  children: (prop: T) => ReactNode;
}) {
  return children(setup());
}

render(
  <HooksSeparator
    setup={() => {
      const [isOpen, setOpen] = useState(false);
      return {
        isOpen,
        setOpen,
      };
    }}
  >
    {({ isOpen, setOpen }) => (
      <>
        <button type="button" onClick={() => setOpen(true)}>
          open
        </button>
        <Popover isOpen={isOpen} onOpenChange={setOpen}>
          content
        </Popover>
      </>
    )}
  </HooksSeparator>,
);