title: MUI Select | Change how the selected value display in Input
body: <p>I have an array of objects and I want to bind multiple properties of object in <code>MenuItem</code> but I want to display only a single property to be displayed in <code>Select</code></p>
  <p><a href="https://i.stack.imgur.com/kDKLr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kDKLr.png" alt="enter image description here" /></a></p>
  <p>In Above image it is showing 10-xyz in select display, it should only show 10.</p>
  <pre><code>const [age, setAge] = React.useState(&quot;&quot;);
    const [options, setOptions] = React.useState([
      {
        name: &quot;xyz&quot;,
        age: &quot;10&quot;
      },
      { name: &quot;xyz&quot;, age: &quot;20&quot; }
    ]);
    const handleChange = (event) =&gt; {
      setAge(event.target.value);
    };
  
    return (
      &lt;Select
        labelId=&quot;demo-simple-select-label&quot;
        id=&quot;demo-simple-select&quot;
        value={age}
        label=&quot;Age&quot;
        onChange={handleChange}
      &gt;
        {options.map((ele) =&gt; {
          return(&lt;MenuItem value={ele.age}&gt;
            {`${ele.age}-${ele.name}`} 
          &lt;/MenuItem&gt;)
        })}
      &lt;/Select&gt;
    );
  }
  </code></pre>