I want to add a placeholder (– Select –) to the following MUI Select component.

const [country, setCountry] = useState("")

<FormControl fullWidth error={!country}>
    <Select
        displayEmpty
        renderValue={selected => selected.length === 0 ? '-- Select --' : selected}
        value={country}
        onChange={e => setCountry(e.target.value)}
    >
        <MenuItem value='US'>America</MenuItem>
        <MenuItem value='CA'>Canada</MenuItem>
        <MenuItem value='UK'>England</MenuItem>
    </Select>
    {!country && <FormHelperText>This field is required.</FormHelperText>}
</FormControl>

When I added displayEmpty and following renderValue prop to the Select component, if I selected ‘America’, ‘US’ instead of ‘America’ was rendered.

renderValue={selected => selected.length === 0 ? '-- Select --' : selected}

If value props were changed like following, the component worked.

<MenuItem value='America'>America</MenuItem>
<MenuItem value='Canada'>Canada</MenuItem>
<MenuItem value='England'>England</MenuItem>

However, only country codes will be stored in database, so values must be ‘US’, ‘CA’ and ‘UK’. Could someone teach me how to add a placeholder while the corresponding option can be correctly shown when it’s selected?