title: 'onChange' event is getting called only once in react
body: <p>I am using material-ui </p>
  
  <p>Here my react component goes:</p>
  
  <pre><code>import Checkbox from '@material-ui/core/Checkbox';
  import FormControlLabel from '@material-ui/core/FormControlLabel';
  import React from "react";
  import { withStyles } from "@material-ui/core/styles";
  
  const styles = (theme) =&gt; ({
  });
  
  class SomeComponent extends React.Component {
    static propTypes = {
  
    };
  
    state = {
      checked: true,
    }
  
    handleChange = name =&gt; event =&gt; {        
      event.persist()
      this.setState({ 
        [name]: event.target.checked 
      }, () =&gt; {
        if (event.target.checked) {
          this.props.parentMethod1(event.target.value)
        } else {
          this.props.parentMethod2(event.target.value)
        }
      });
    };
  
    render() {
      const { user } = this.props;
      return (
        &lt;div&gt;
          &lt;FormControlLabel
            control={
              &lt;Checkbox
                checked={this.state.checked}
                onChange={this.handleChange('checked')}
                value={user.id}
                color="primary"
              /&gt;
            }
            label={user.first_name}
          /&gt;
        &lt;/div&gt;
      );
    }
  
  }
  
  export default withStyles(styles)(SomeComponent);
  </code></pre>
  
  <p><strong>The problem is, I can select/unselect the checkBox only once</strong>. 
  After selecting/deselecting the checkbox, onChange event is not occuring. </p>
  
  <p>Can you help me how to make Checkbox work as the way it is?
  Thanks.</p>
  
  <p>Here is the reproduced error: </p>
  
  <p><a href="https://codesandbox.io/s/y041zknrqv" rel="nofollow noreferrer">https://codesandbox.io/s/y041zknrqv</a></p>