Material UI Grid - Textfield is being resized once an item is selected in Select element

I am using Material UI to build a simple UI. Textfield size (set to fullWidth) is getting smaller when I select one from Select element.

I reduced the code to minimum which can reproduce the weird action.

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

When I move focus to textfield after choosing one from the Select element, it gets smaller.

Please try the codesandbox in bigger window size. https://codesandbox.io/s/material-demo-59siu This is the url of codesandbox.