El problema definitivamente está siendo causado por <ThemeProvider theme={theme}> porque cuando lo elimino, funciona. Pero necesito ThemeProvide para que la fuente encaje en el cuadro de selección cuando estoy en el móvil.

Código:

 <Grid item xs={12} sm={6}> <FormControl className={classes.formControl}> <InputLabel id="demo-simple-select-label">Starter </InputLabel> <Select fullWidth labelId="demo-simple-select-label" id="demo-simple-select" name="starter" value={state.starter} onChange={handleInputChange} required> <ThemeProvider theme={theme}> <MenuItem value={starters[0]}>{starters[0]}</MenuItem> <MenuItem value={starters[1]}>{starters[1]}</MenuItem> <MenuItem value={starters[2]}>{starters[2]}</MenuItem> </ThemeProvider> </Select> </FormControl> </Grid>

Actualmente se ve como el siguiente:

Necesita Select/MenuItem para funcionar como se muestra a continuación: