Сетка пользовательского интерфейса материала - размер текстового поля изменяется после выбора элемента в элементе «Выбрать»

Question

Я использую Material UI для создания простого UI. Размер текстового поля (установленного на полную ширину) становится меньше, когда я выбираю один из элемента Select.

Я уменьшил код до минимума, который может воспроизвести странное действие.

function ImportDialog(props) {
  const [state, setState] = useState({
    id: "",
    color: ""
  });

  const handleChange = name => event => {
    setState({ ...state, [name]: event.target.value });
  };

  const inputLabel = React.useRef(null);
  const [labelWidth, setLabelWidth] = React.useState(0);

  useEffect(() => {
    setLabelWidth(inputLabel.current.offsetWidth);
  }, []);

  return (
    <div style={{ width: "40vw", height: "50vh", margin: "25vh auto" }}>
        <Grid container spacing={2}>
          <Grid item md={6}>
            <Grid container direction="column">
              <Grid item>
                <TextField
                  label="ID"
                  margin="dense"
                  variant="outlined"
                  fullWidth
                  value={state.id}
                  onChange={handleChange("id")}
                />
              </Grid>
              <Grid item>
                <FormControl
                  variant="outlined"
                  margin="dense"
                  fullWidth
                >
                  <InputLabel ref={inputLabel} htmlFor="outlined-age-simple">
                    Color
                  </InputLabel>
                  <Select
                    value={state.color}
                    onChange={handleChange("color")}
                    labelWidth={labelWidth}
                    inputProps={{
                      name: "color",
                      id: "outlined-age-simple"
                    }}
                  >
                    <MenuItem value="">
                      <em>None</em>
                    </MenuItem>
                    <MenuItem value={1}>Sup1</MenuItem>
                 </Select>
                </FormControl>
              </Grid>
            </Grid>
          </Grid>
        </Grid>
    </div>
  );
}

export default withStyles(styles)(ImportDialog);

Когда я перемещаю фокус в текстовое поле после выбора одного из элемента Select, он становится меньше.

Пожалуйста, попробуйте коды и поле в большем размере окна. https://codesandbox.io/s/material-demo-59siu Это адрес кодов и ящика.