How to use the @storybook/client-api.useState function in @storybook/client-api

export const withOverflowScrollOnHtml = () => {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <div>Scroll down</div>
      <button> setOpen(true)}&gt;Show dialog</button>
      <dialog> setOpen(false)}&gt;
        <header>Dialog title</header>
      </dialog>
    </div>
  );
};
withOverflowScrollOnHtml.story = {

export const Input = () => {
  const [text, setText] = useState('foo');
  return <input value="{text}"> setText(e.target.value)} /&gt;;
};

export const Checkbox = () => {
  const [on, setOn] = useState(false);
  return (
    <label>
      <input checked="{on}" type="checkbox"> setOn(e.target.checked)} /&gt;
      On
    </label>
  );
};