Material-UI Select component with many menu items is slow - Alternative solutions

Question

I am trying to make a select element for cities with material-UI. The problem is that I need to have the same design as the Textfields I have above that element. I used the following

<FormControl variant='outlined' className={classes.city}>
<InputLabel>City</InputLabel>
 <Select
  label='City'
  value={city}
  onChange={(event) => setCity(event.target.value)}
 >
   {cities.map((storeCity, key) => <MenuItem key={key} value={storeCity.id}>{storeCity.name}</MenuItem>)}
 </Select>
</FormControl>

Before clicking the element

This gives me the perfect visual output and generally works well. The only problem is that it is slow as the cities array contains more than 200 cities. What should I do to have the same visual effect with faster rendering?