title: global variable doesn't reset after validating
body: <p>I have a multi step form and on one of the pages i have a list of roles in form of checkoxes. the behaviour i have right now is that the first time i create a user it works smoothly without problem but the second time is that when I finish this creation the global variable that I used for the activation and disabling of the next button doesn't reset</p>
  
  <p>here is the code </p>
  
  <pre><code>var rolesCheck = [] ;
  export default function RolesForm(props) {
    const classes = useStyles();
    const { setDisabled } = props;
  
    if(rolesCheck.length === 0){
      setDisabled(true)
    }
    function filling(rolesCheck,element) {
      if (rolesCheck.indexOf(element) !== -1) {
        rolesCheck.splice(rolesCheck.indexOf(element),1);
        if (rolesCheck.length === 0) {
          setDisabled(true);
        }
      } else {
        rolesCheck.push(element);
        setDisabled(false);
      }
    }
  
    function getRoles(x) {
      return x.map((role, key) =&gt; {
        if (role.name) {
          return (
            &lt;span className={classes.span} key={key}&gt;
              &lt;Checkbox
                color="primary"
                name={role.value}
                value={role.value}
                onChange={event =&gt; {
                  filling(rolesCheck,role.value);
                  props.handleRoles(event);
                }}
                checked={props.selectedRoles.includes(role.value)}
              /&gt;
              {role.name}
            &lt;/span&gt;
          );
        } else {
          return "";
        }
      });
    }
  
    return (
      &lt;Grid className={classes.root}&gt;
        &lt;Grid className={classes.paper}&gt;
          &lt;Grid&gt;
            &lt;Typography variant="h3"&gt;Admin :&lt;/Typography&gt;
            &lt;div&gt; {getRoles(roles.admin)}&lt;/div&gt;
          &lt;/Grid&gt;
          &lt;Grid&gt;
            &lt;Typography variant="h3"&gt;
              &lt;Translate i18nKey="back_office_roles" /&gt;
            &lt;/Typography&gt;
            &lt;div&gt;{getRoles(roles.back_office)}&lt;/div&gt;
          &lt;/Grid&gt;
        &lt;/Grid&gt;
      &lt;/Grid&gt;
    );
  }
  </code></pre>
  
  <p>setDisabled is the function i use to activated or disable the button
  setDisabled(true) disable and setDisable(false) activate </p>