I want to add a placeholder (– Select –) to the following MUI Select component created by TextField with select prop.

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

<TextField
    select
    value={country}
    onChange={e => setCountry(e.target.value)}
>
    <MenuItem value='US'>America</MenuItem>
    <MenuItem value='CA'>Canada</MenuItem>
    <MenuItem value='UK'>England</MenuItem>
</TextField>

I’ve tried to add placeholder='-- Select --' props but the placeholder can’t be displayed.

Then I’ve tried to add label='-- Select --' props. Although the placeholder can be displayed, when the component was rendered initially and I tried to select an option, the label moved to the top-left corner of the component, I don’t want that animation. Then I’ve tried to add InputLabelProps={{disableAnimation: true}} props but the animation still existed.

Could someone teach me how to add a placeholder in my case?