title: How to set default value to selected in material-UI multi select box in reactjs?
body: <p>I am using <a href="https://v4.mui.com/components/selects/#multiple-select" rel="nofollow noreferrer">Multi Select box</a> from material-ui v4.</p>
  <p>I set a default value in the useState and I can see the values but when I open the select the default list is not selected and when I click on it, it added again to the select box so I have the same value multiple time.</p>
  <pre><code>    /* 
      the full list configurationList [{_id: '21375d87eed65e103c790121', configurationName: 'Regime1'},{_id: '21375d87eed65e103c790122', configurationName: 'Regime2'},
      {_id: '21375d87eed65e103c790123', configurationName: 'Regime3'}]
      
  The currentHistogramConfigurationList [{_id: '21375d87eed65e103c790121', configurationName: 'Regime1'}]*/
  
              const [
              histogrammeConfigurations,
              setHistogrammeConfigurations
            ] = useStateWithDep(
              currentHistogramConfigurationList ? currentHistogramConfigurationList : []
            );
          
            const handleChange = (event) =&gt; {
              console.log('*handle_Change', event.target.value);
              setHistogrammeConfigurations(event.target.value);
            };
          
            const handleDelete = (_id) =&gt; () =&gt; {
              console.log('*handle_Delete', _id);
              const chipDataConst = [...histogrammeConfigurations];
              const chipToDelete = chipDataConst.map(({ _id }) =&gt; _id).indexOf(_id);
              console.log('*handle_chipToDelete', chipToDelete);
              chipDataConst.splice(chipToDelete, 1);
              setHistogrammeConfigurations(chipDataConst);
            };
          //...
          &lt;Select 
              labelId='demo-mutiple-chip-label'
              id='demo-mutiple-chip'
              multiple
              value={histogrammeConfigurations}
              onChange={handleChange}
              input={&lt;Input id='select-multiple-chip' /&gt;}
              renderValue={(selected) =&gt; (
              &lt;div className={classes.chips}&gt;
                 {selected.map((value) =&gt; {
                          return (
                            &lt;Chip
                              key={value._id}
                              label={value.configurationName}
                              className={classes.chip}
                              onDelete={handleDelete(value._id)}
                            /&gt;
                          );
                        })}
                      &lt;/div&gt;
                    )}
                    MenuProps={MenuProps}
                  &gt;
                    {configurationList.map((item) =&gt; (
                      &lt;MenuItem
                        key={item._id}
                        value={item}
                        style={getStyles(item._id, histogrammeConfigurations, theme)}
                        // selected
                      &gt;
                        {item.configurationName}
                      &lt;/MenuItem&gt;
                    ))}
                  &lt;/Select&gt;
  </code></pre>