Material UI Select displayEmpty label covers input

Question

I'm having a hard time with this select. Looks like there might be a bug with the displayEmpty prop. I've tried the following, but the label always covers the input when the value === ""

        <FormControl>
          <InputLabel htmlFor="profile-select">Profile</InputLabel>
          <Select
            value={values.accessProfile}
            onChange={handleChange("accessProfile")}
            input={<Input id="profile-select" />}
            displayEmpty
          >
            <MenuItem value={""}>None</MenuItem>
            {profiles.map(profile => (
              <MenuItem value={profile.id}>{profile.name}</MenuItem>
            ))}
          </Select>
        </FormControl>

Answer 1

You need to set the shrink property on the InputLabel component to true https://material-ui.com/api/input-label/