title: How do I control the behaviour of my checkbox?
body: <p>I'm looping through an array of <code>vehicleTypes</code> and show a dropdown of checkboxes. I'm using <code>FormControlLabel</code> and <code>&lt;Checkbox/&gt;</code> as the control. The problem is when I select a checkbox, it closes my drop down (i'm using <code> &lt;Collapse in={openModule} timeout=&quot;auto&quot; unmountOnExit&gt;</code> for this.</p>
  <p>I don't know why this is happening and it's sort of screwing up the flow of the form. I also need to tell it that when <code>All Vehicles</code> is selected, make all of the others <strong>blacked out</strong></p>
  <p>Image and code attached:</p>
  <p><strong>The Code</strong></p>
  <pre><code>&lt;TableCell
                                      colSpan={4}
                                      className={styles.vehicleTypeTableCell
                                      }&gt;
                                      &lt;Collapse in={openModule} timeout=&quot;auto&quot; unmountOnExit&gt;
                                        &lt;Table&gt;
                                          &lt;TableBody&gt;
                                            {vehicleTypes.map((selection) =&gt; (
                                              &lt;TableRow&gt;
                                                &lt;TableCell
                                                  className={styles.vehicleTypeList}
                                                  colSpan={2}
                                                &gt;
                                                  &lt;FormControlLabel
                                                    style={{ padding: 0, margin: 0 }}
                                                    control={&lt;Checkbox 
                                                    /&gt;}
                                                    label={selection}
                                                    name=&quot;names&quot;
                                                    value={selection}
                                                    onChange={(event) =&gt; {
                                                      if (selection === 'All Vehicles') {
                                                        setSelectionDisabled(!selectionDisabled);
                                                      }
                                                      handleChange(event);
                                                    }}
                                                    disabled={
                                                      selection !== 'All Vehicles'
                                                        ? selectionDisabled
                                                        : false
                                                    }
                                                  /&gt;
                                                &lt;/TableCell&gt;
                                              &lt;/TableRow&gt;
                                            ))}
                                          &lt;/TableBody&gt;
                                        &lt;/Table&gt;
                                      &lt;/Collapse&gt;
                                    &lt;/TableCell&gt;
  </code></pre>
  <p>Does anyone know how to stop this from happening?</p>
  <p><strong>Video of Behavior</strong></p>
  <p><a href="https://i.stack.imgur.com/CRAxj.gif" rel="nofollow noreferrer">Gif of the behavior</a></p>
  <p>Handle Change is changing the <code>formik</code> value. So, what it's doing is it's targeting names in the list below... and it's updating the value to the radio button (created by looping through the array) that is selected</p>
  <pre><code>  const initialValues = {
      brandId,
      languageCode,
      reservationType,
      purchaseDate: '',
      firstName: '',
      lastName: '',
      zipCode: '',
      email: '',
      confirmEmail: '',
      city: '',
      ownershipType: '',
      offerType: '',
      names: [],
      vehiclesOfInterest: [],
    };
  </code></pre>