Material-ui input label out boxed when flexDirection is row - css

Question

This is a little bit weird situation. I have 2 divs in a FormControl and my input label for Select completely fine. However, when I style it in flexDirection: 'row' The label is outboxed as you can see in below picture.
Edit: It works fine when I comment out justifyContent.
When it is ok.
When it is in flexDirection: row
Below is my code
const useStyles = makeStyles((theme) => ({
submitForm: {
display: 'flex',
flexDirection: 'row',
margin: theme.spacing(1),
justifyContent: 'space-evenly'
},
bacsInputs: {
minWidth: '200px'
}
}))
const DemoInventory = () => {
const bacsInfoInputs = () => {
return(
<>
<p><b>Enter BACS information below and click SAVE</b></p>
<FormControl variant="outlined" className={classes.submitForm}>
<div>
<InputLabel clasName={classes.submitForm} id="demo-simple-select-outlined-label">Select BACS Unit</InputLabel>
<Select
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
value={bacsUnit}
onChange={onChangeInput}
label="BACS Unit"
className={classes.bacsInputs}
>
<MenuItem value={'Product-1'}>Product-1</MenuItem>
<MenuItem value={'Product-2'}>Product-2</MenuItem>
<MenuItem value={'Product-3'}>Product-3</MenuItem>
<MenuItem value={'Product-4'}>Product-4</MenuItem>
<MenuItem value={'Product-5'}>Product-5</MenuItem>
<MenuItem value={'Product-6'}>Product-6</MenuItem>
<MenuItem value={'Product-7'}>Product-7</MenuItem>
</Select>
<p>Serial number input</p>
<p>Part number input</p>
<p>Location input</p>
<p>description input</p>
</div>
<div>
<p>deployment input</p>
<p>ship Date input</p>
<p>Expected return date input</p>
</div>
<p>Save Button</p>
</FormControl>
</>
)
}
}
return (
<Fragment>
{bacsInfoInputs()}
</Fragment>
)

Answer 1

it is because you've provided a class classes.submitForm to the FormControl element which is changing its default style and thus you're getting a different style in the selectbox.
FormControl elements are used for wrapping the input elements only to get extra control and features, so don't put any other elements other than input elements inside this element. So put only the Select and InputLabel elements only in this case for better result.