The problem is definitely being caused by <ThemeProvider theme={theme}> because when I take it away it works. But I need ThemeProvide to make the font fit into the select box when on mobile.

Code:

    <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>

Currently looks like the below:

Need the Select / MenuItem to work like below: