title: Material UI Multi-Select different code value and visible value - show keys instead values
body: <p>I am using Material UI Multiple Select based on documentation example. I need to save id of the selected option and show name, so I render object. When I used example from documentation with placeholder, i see ids instead names of selected. 
  See: <a href="https://codesandbox.io/s/kxz5yqmrzv?from-embed" rel="noreferrer">https://codesandbox.io/s/kxz5yqmrzv?from-embed</a></p>
  
  <pre><code>const names = [
    { id: "a", name: "Oliver Hansen" },
    { id: "b", name: "Van Henry" },
    { id: "c", name: "April Tucker" },
    { id: "d", name: "Ralph Hubbard" },
    { id: "e", name: "Omar Alexander" },
    { id: "f", name: "Carlos Abbott" },
    { id: "g", name: "Miriam Wagner" },
    { id: "h", name: "Bradley Wilkerson" },
    { id: "i", name: "Virginia Andrews" },
    { id: "j", name: "Kelly Snyder" }
  ];
  
            &lt;Select
              multiple
              displayEmpty
              value={this.state.name}
              onChange={this.handleChange}
              input={&lt;Input id="select-multiple-placeholder" /&gt;}
              renderValue={selected =&gt; {
                if (selected.length === 0) {
                  return &lt;em&gt;Placeholder&lt;/em&gt;;
                }
  
                return selected.join(", ");
              }}
              MenuProps={MenuProps}
            &gt;
              &lt;MenuItem disabled value=""&gt;
                &lt;em&gt;Placeholder&lt;/em&gt;
              &lt;/MenuItem&gt;
              {names.map(name =&gt; (
                &lt;MenuItem
                  key={name.id}
                  value={name.id}
                  // style={getStyles(name, this)}
                &gt;
                  {name.name}
                &lt;/MenuItem&gt;
              ))}
            &lt;/Select&gt;
  </code></pre>