title: React Storybook Checkbox change handler not working
body: <p>I am creating a checkbox component using React, Typescript, Storybook and Styled-Components, after following this tutorial: <a href="https://medium.com/@colebemis/building-a-checkbox-component-with-react-and-styled-components-8d3aa1d826dd" rel="nofollow noreferrer">building-a-checkbox-component-with-react-and-styled-components</a>. I have had to adjust the code as I am using a FunctionComponent, but I am facing an issue with the change handler. I cannot check or uncheck the Checkbox which seems to be readonly, and I'm not sure where I am going wrong. Here is my code:</p>
  
  <p><strong>Checkbox.tsx</strong></p>
  
  <pre><code>import React from 'react';
  import styled from 'styled-components';
  import { FunctionComponent } from 'react';
  
  type CheckboxProps = {
      checked?: boolean;
      onChange: (e: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; void;
  };
  
  const CheckboxContainer = styled.div`
      display: inline-block;
      vertical-align: middle;
  `;
  
  const Icon = styled.svg`
      fill: none;
      stroke: white;
      stroke-width: 2px;
  `;
  
  const HiddenCheckbox = styled.input.attrs({ type: 'checkbox' })`
      border: 0;
      clip: rect(0 0 0 0);
      clippath: inset(50%);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      white-space: nowrap;
      width: 1px;
  `;
  
  const StyledCheckbox = styled.div`
      display: inline-block;
      width: 16px;
      height: 16px;
      background: ${(props: CheckboxProps) =&gt; (props.checked ? 'green' : 'white')};
      border-color: 'dark gray';
      border-width: 1px;
      border-style: solid;
      border-radius: 2px;
  
      ${HiddenCheckbox}:focus + &amp; {
          box-shadow: 0 0 0 3px grey;
      }
  
      ${Icon} {
          visibility: ${(props: CheckboxProps) =&gt; (props.checked ? 'visible' : 'hidden')};
      }
  `;
  
  const Checkbox: FunctionComponent&lt;CheckboxProps&gt; = ({ onChange, checked, ...props }) =&gt; {
      return (
          &lt;CheckboxContainer&gt;
              &lt;HiddenCheckbox checked={checked} {...props} onChange={onChange} /&gt;
              &lt;StyledCheckbox data-testid="styledcheckbox" checked={checked} {...props} onChange={onChange}&gt;
                  &lt;Icon viewBox="0 0 24 24"&gt;
                      &lt;polyline points="20 6 9 17 4 12" /&gt;
                  &lt;/Icon&gt;
              &lt;/StyledCheckbox&gt;
          &lt;/CheckboxContainer&gt;
      );
  };
  
  export default Checkbox;
  </code></pre>
  
  <p><strong>Checkbox.stories.js</strong></p>
  
  <pre><code>// Checkbox.stories.js
  import React, { useState, useRef } from 'react';
  import Checkbox from '@components/Checkbox/Checkbox';
  import { action } from '@storybook/addon-actions';
  import { storiesOf } from '@storybook/react';
  
  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
  const CheckboxStateful = props =&gt; {
      const [value, setValue] = useState(props);
      const valRef = useRef(value);
      // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
      const onChange = event =&gt; {
          setValue(event.target.value);
          valRef.current = event.target.value;
      };
  
      return (
          &lt;Checkbox
              value={value}
              onChange={event =&gt; {
                  onChange(event);
              }}
          &gt;&lt;/Checkbox&gt;
      );
  };
  storiesOf('Checkbox', module)
      .add('with checked', () =&gt; {
          const value = true;
          // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
          const onChange = event =&gt; setValue(event.target.value);
          return &lt;CheckboxStateful value={value} onChange={onChange}&gt;&lt;/CheckboxStateful&gt;;
      })
      .add('with unchecked', () =&gt; {
          const value = false;
          // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
          const onChange = event =&gt; setValue(event.target.value);
          return &lt;CheckboxStateful value={value} onChange={onChange}&gt;&lt;/CheckboxStateful&gt;;
      });
  </code></pre>
  
  <p>As I am a novice at both React and Storybook I may require some expert input into whether my change handler code is correct or not. I have looked at other examples, but none of them use Typescript. Any help would be appreciated.</p>