How to use the @storybook/addons.useState function in @storybook/addons

() => {
    const toggleRef: RefObject = createRef()
    const toggleContainerRef: RefObject = createRef()

    const [checked, setChecked] = useState(false)

    const handleToggleChange = (): void => {
      setChecked(!checked)
    }

    const handleLogRefs = (): void => {
      /* eslint-disable */
      console.log('ToggleRef', toggleRef.current)
      console.log('ToggleContainerRef', toggleContainerRef.current)
      /* eslint-enable */
    }

    return (
      <div>
        </div>

() => {
    const [rangeSliderValue, setRangeSliderValue] = useState(50)
    const rangeSliderRef: RefObject = createRef()

    const handleInputChange = (e: ChangeEvent): void => {
      setRangeSliderValue(parseInt(e.target.value))
    }

    const handleLogRef = (): void => {
      /* eslint-disable */
      console.log(rangeSliderRef.current)
      /* eslint-enable */
    }

    const exampleRangeSliderStyle = {width: '100%'}

    return (
      <div></div>

export function withEditor(storyFn: any) {
  const [state, setState] = useState('');
  const scope = useParameter('scope');
  const liveEditConfig: LiveEditConfiguration | undefined = useParameter('live-edit');
  const scopeComponents =
    liveEditConfig && liveEditConfig.components ? liveEditConfig.components : {};

  useChannel({
    [EVENT_NEW_SOURCE]: s => {
      setState(s);
    },
  });

  if (state) {
    try {
      return scopeEval(transform(state, { presets: [['react']] }).code, {
        // @ts-ignore
        ...scope,

() => {
    const [value, setValue] = useState(25)

    return (
      <div>
        <input value="{value}" max="{number('max'," min="{number('min',">
            setValue(e.target.value === '' ? NaN : Number(e.target.value))
          }
          name={text('name', 'Name')}
          titleText={text('titleText', 'Title Text')}
          disabledTitleText={text('disabledTitleText', 'Disabled Title Text')}
          maxLength={number('maxLength', 24)}
          icon={
            IconFont[</div>

const navigationStory = (currentPageText, navData, dir, brand, isAmp) => ({
  script,
  service,
}) => {
  const ScrollableNavigation = isAmp
    ? AmpScrollableNavigation
    : CanonicalScrollableNavigation;

  const [isScrollable, setIsScrollable] = useState(false);

  useEffect(() => {
    const mediaQueryList = window.matchMedia('(max-width: 37.5rem)');
    setIsScrollable(mediaQueryList.matches);

    const handler = event => setIsScrollable(event.matches);
    mediaQueryList.addListener(handler);

    return () => mediaQueryList.removeListener(handler);
  }, []);

  return (
    <>
      {brand && getBrand()}

scrollbarStories.add('Scrollbar Example', () => {
  const [selection, setSelection] = useState('Foo')
  const handleSelectionChange = (value: string) => {
    setSelection(value)
  }

  return (
    <div>
      <div>
        </div></div>

() => {
    const [weapon, setWeapon] = useState('chainsaw')

    const handleToggleChange = (value: string): void => {
      setWeapon(value)
    }

    return (
      <div>
        
          <p>Choose a weapon to fight zombies with</p>
          </div>