Story with useState

Checkbox.stories.js

import React, { createElement, useState } from 'react';
import { storiesOf } from '@storybook/react';
import Checkbox from './Checkbox';
import Grid from '../Grid/Grid';
import { StoryWrapper, Wrap } from '../Mixins';

storiesOf('Forms/Checkbox', module).add('Default', () =>
  createElement(() => {
    const [isChecked, setIsChecked] = useState([0, 0, 0, 0]);

    return (
      <StoryWrapper>
        <Wrap>
          <h2>Checkbox</h2>
          <Grid smCol="2" mdCol="2">
            <Checkbox
              name="checkbox01"
              label="Checkbox 01"
              onChange={() => setIsChecked([1, 0, 0, 0])}
              checked={isChecked[0]}
            />
            <Checkbox
              name="checkbox02"
              label="Checkbox 02"
              onChange={() => setIsChecked([0, 1, 0, 0])}
              checked={isChecked[1]}
            />
            <Checkbox
              name="checkbox03"
              label="Checkbox 03"
              onChange={() => setIsChecked([0, 0, 1, 0])}
              checked={isChecked[2]}
            />
            <Checkbox
              name="checkbox04"
              label="Checkbox 04"
              onChange={() => setIsChecked([0, 0, 0, 1])}
              checked={isChecked[3]}
            />
          </Grid>
        </Wrap>
      </StoryWrapper>
    );
  }),
);