title: React MUI Select Object not showing selected value
body: <p>Hey I am stuck with a problem, I using MUI select function for me to select a country.  not sure why when I selected the country it change its value but when inside the select box it does not show anything.</p>
  <pre><code>const [selectedCountry, setSelectedCountry] = useState({});
   const handleChangeCountry = (event) =&gt; {
      setCountryValue(event.target.value);
    };
  &lt;FormControl sx={{ m: 1, width: 400 }}&gt;
                  &lt;InputLabel id=&quot;country-label&quot;&gt;Country&lt;/InputLabel&gt;
                  &lt;Select
                    labelId=&quot;country-label&quot;
                    id=&quot;country&quot;
                    value={selectedCountry}
                    onChange={handleChangeCountry}
                    MenuProps={MenuProps}
                  &gt;
                    {countryList.map((data,index) =&gt; (
                      &lt;MenuItem
                        key={data.name}
                        value={data}
                      &gt;
                        {data.name}
                      &lt;/MenuItem&gt;
                    ))}
                  &lt;/Select&gt;
  &lt;p className=&quot;text-black&quot;&gt;{selectedCountry.name}&lt;/p&gt;
  &lt;p className=&quot;text-black&quot;&gt;{JSON.stringify(selectedCountry, null, 2)}&lt;/p&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/cTblI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cTblI.png" alt="enter image description here" /></a></p>
  <p>As you can see, below the blue background color text show the country that I selected, but in the select box is not showing. Not sure where I am doing wrong.
  Thanks for helping advance.</p>