Material-UI FormControl InputLabel display problem - reactjs

Question

In the picture, you can see that my label is behind the outline but I don't know why it is. I didn't give any kind of style I just gave a minWidth that's it but still, it's one kind of broken I mean the label is behind the line. Here is the code:
import React, { Component } from "react";
import {
Container, Grid, FormControl,
InputLabel, Select, MenuItem
} from "#material-ui/core";
import { withStyles } from "#material-ui/core/styles";
const styles = (theme) => ({
formControl: {
minWidth: 180
}
});
class Account extends Component {
constructor() {
super();
this.state = {
age: ""
};
this.handleChange = this.handleChange.bind(this);
}
handleChange = (event) => this.setState({ age: event.target.value });
render() {
const { classes } = this.props;
const { age } = this.state;
return (
<React.Fragment>
<Container>
<Grid container spacing={2}>
<Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
<FormControl
className={classes.formControl}
variant="outlined"
size="small">
<InputLabel>Age</InputLabel>
<Select value={age} onChange={this.handleChange}>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</Grid>
</Grid>
</Container>
</React.Fragment>
);
}
}
export default withStyles(styles, { withTheme: true })(Account);

Answer 1

The "Select" did not have enough space. To proof the theory I have added a < br > break to create some extra space. Now it displays the age above the Select Field. Please adjust the Margin Top.

Answer 2

import React, { Component, createRef } from "react";
import { Container, Grid, FormControl,
InputLabel, Select, MenuItem } from "#material-ui/core";
import { withStyles } from "#material-ui/core/styles";
const styles = (theme) => ({
formControl: {
minWidth: 180
}
});
class Account extends Component {
constructor() {
super();
this.state = {
age: '',
labelWidth: 0
};
this.handleChange = this.handleChange.bind(this);
this.inputLabel = createRef();
}
handleChange = (event) => this.setState({ age: event.target.value });
componentDidMount() {
this.setState({ labelWidth: this.inputLabel.current.offsetWidth });
}
render() {
const { classes } = this.props;
const { age, labelWidth } = this.state;
return (
<React.Fragment>
<Container>
<Grid container spacing={2}>
<Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
<FormControl
className={classes.formControl}
variant="outlined"
size="small"
>
<InputLabel ref={this.inputLabel}>Age</InputLabel>
<Select
value={age}
onChange={this.handleChange}
labelWidth={labelWidth}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</Grid>
</Grid>
</Container>
</React.Fragment>
);
}
}
export default withStyles(styles, { withTheme: true })(Account);