title: Control multiple checkboxes in Material UI
body: <p>I have a dropdown menu with several checkboxes and I'm trying to add onClick event on each of them. But when I check one of the checkboxes, all of them are checked. This is what I've tried to do:</p>
  <pre><code>const [isChecked, setIsChecked] = React.useState(false);
  
  const isCheckboxChecked = () =&gt; {
      setIsChecked(isChecked ? false : true)
  }
  
  return menuItems.map((item, index) =&gt; (
          &lt;React.Fragment&gt;
              &lt;MenuItem
                  value={item.value}
                  selected={item.value === value}
                  key={index}
              &gt;
                  &lt;Checkbox
                      key={index}
                      checked={isChecked}
                      onClick={() =&gt; isCheckboxChecked()}
                  &gt;
                      &lt;Label&gt;{item.label}&lt;/Label&gt;
                  &lt;/Checkbox&gt;
              &lt;/MenuItem&gt;
              {index === 2 || index === 3 ? &lt;hr /&gt; : null}
          &lt;/React.Fragment&gt;
      ));
  </code></pre>
  <p>As I understand, all checkboxes are using the same state <code>isChecked</code> and I'm wondering how to make them independent.</p>