title: React Material-UI Multiselect with checkbox ccannot select all
body: <p>I am trying to use Material UI multiselect with checkboxes. So far, i am able to make multiple selects and get the values but i am unable to render the actual names of selected values or get all selected values. Any leads to a new approach i can use or useful links to help get the ids of all selected values in my array will be appreciated.</p>
  <p>I created a sandbox that has a mock of my data from an api as well here : <a href="https://codesandbox.io/s/material-ui-multiple-select-with-select-all-option-forked-2200v" rel="nofollow noreferrer">sandbox</a></p>
  <p>My select looks like this :</p>
  <pre><code>const [selected, setSelected] = useState([]);
    const isAllSelected =
      options.length &gt; 0 &amp;&amp; selected.length === options.length;
  
    const handleChange = (event) =&gt; {
      console.log(&quot;vals&quot;, event.target);
      const value = event.target.value;
      if (value[value.length - 1] === &quot;all&quot;) {
        setSelected(selected.length === options.length ? [] : options.title);
        return;
      }
      setSelected(value);
      console.log(&quot;values&quot;, selected);
    };
  
  &lt;FormControl className={classes.formControl}&gt;
        &lt;InputLabel id=&quot;mutiple-select-label&quot;&gt;Multiple Select&lt;/InputLabel&gt;
        &lt;Select
          labelId=&quot;mutiple-select-label&quot;
          multiple
          variant=&quot;outlined&quot;
          value={selected}
          onChange={handleChange}
          renderValue={(selected) =&gt; selected}
          MenuProps={MenuProps}
        &gt;
          &lt;MenuItem
            value=&quot;all&quot;
            classes={{
              root: isAllSelected ? classes.selectedAll : &quot;&quot;
            }}
          &gt;
            &lt;ListItemIcon&gt;
              &lt;Checkbox
                classes={{ indeterminate: classes.indeterminateColor }}
                checked={isAllSelected}
                indeterminate={
                  selected.length &gt; 0 &amp;&amp; selected.length &lt; options.length
                }
              /&gt;
            &lt;/ListItemIcon&gt;
            &lt;ListItemText
              classes={{ primary: classes.selectAllText }}
              primary=&quot;Select All&quot;
            /&gt;
          &lt;/MenuItem&gt;
          {options.map((option) =&gt; (
            &lt;MenuItem key={option.id} value={option.id}&gt;
              &lt;ListItemIcon&gt;
                &lt;Checkbox checked={selected.includes(option.id)} /&gt;
              &lt;/ListItemIcon&gt;
              &lt;ListItemText primary={option.title} /&gt;
            &lt;/MenuItem&gt;
          ))}
        &lt;/Select&gt;
  
        &lt;p&gt;{selected}&lt;/p&gt;
      &lt;/FormControl&gt;
  </code></pre>