title: (React) Material-UI: A component is changing the controlled checked state of SwitchBase to be uncontrolled
body: <p>I am using the useState hook and have an array of conditions</p>
  <pre><code>const [conditions, setConditions] = useState([])
  </code></pre>
  <p>Each element in this array contains a {condition: &quot;some string&quot;, value: boolean}</p>
  <p>I render my array like this:</p>
  <pre><code>       &lt;FormControl component=&quot;fieldset&quot;&gt;
              &lt;FormGroup aria-label=&quot;position&quot; column className={classes.form}&gt;
                {conditions.map(({ condition, value }, index) =&gt; {
                  return (
                    &lt;FormControlLabel
                      key={index}
                      value=&quot;end&quot;
                      control={
                        &lt;Checkbox
                          checked={value}
                          onClick={() =&gt; {
                            changeConditionValue(index, !conditions[index].value);
                          }}
                        /&gt;
                      }
                      label={condition}
                      labelPlacement=&quot;end&quot;
                    /&gt;
                  );
                })}
              &lt;/FormGroup&gt;
            &lt;/FormControl&gt;
  </code></pre>
  <p>Now I am trying to change the condition´s value at a certain index if you press on the checkmark attached to it and I have set it up like this:</p>
  <pre><code> const changeConditionValue = (findIndex, newValue) =&gt; {
      const saveConditions = conditions;
      setConditions([]);
      saveConditions.map(({ condition, value }, index) =&gt; {
        if (index != findIndex) {
          setConditions((old) =&gt; [...old, { condition, value }]);
        } else {
          setConditions((old) =&gt; [...old, { condition, newValue }]);
        }
      });
    };
  
  </code></pre>
  <p>First I save the old conditions because if I keep using the &quot;...old&quot; the values of the old array will be saved and I do not want that that is why I have my saveConditions where I map through in order to set those values to my new setConditions. Everything works fine, except for if I do this more than one time. The first time the value gets returned back, but the second time it returns undefined ?</p>
  <pre><code>This is the error: Material-UI: A component is changing the controlled checked state of SwitchBase to be uncontrolled.
  Elements should not switch from uncontrolled to controlled (or vice versa).
  Decide between using a controlled or uncontrolled SwitchBase element for the lifetime of the component.
  The nature of the state is determined during the first render, it's considered controlled if the value is not `undefined`.
  ```
  </code></pre>