MUI Select Component Rendering Weirdly - reactjs

Question

I have a custom component that consist of 3 Select components. However Select's are not rendering correctly. Their labels are seen next to the Select components instead of inside/on top of the border. See this See this also It should have looked like this
I tested this component on a code sandbox and it was working but not sure why it is not working in my project. I have #mui/material: 5.11.9 and react: 18.2.0
My component:
import React from 'react';
import {
Button,
Menu,
MenuItem,
Select,
FormControl,
InputLabel,
} from '#mui/material';
const FilterComponent = () => {
const [open, setOpen] = React.useState(false);
const [modifiedValue, setModifiedValue] = React.useState('');
const [fileValue, setFileValue] = React.useState('');
const [numberValue, setNumberValue] = React.useState('');
const handleOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
const handleModifiedChange = (event) => {
setModifiedValue(event.target.value);
};
const handleFileChange = (event) => {
setFileValue(event.target.value);
};
const handleNumberChange = (event) => {
setNumberValue(event.target.value);
};
return (
<div>
<Button variant='contained' onClick={handleOpen}>
Filter
</Button>
<Menu
id='filter-menu'
anchorEl={open}
open={Boolean(open)}
onClose={handleClose}
>
<MenuItem>
<FormControl
variant='standard'
sx={{ m: 1, minWidth: 200 }}
>
<InputLabel>Modified</InputLabel>
<Select
value={modifiedValue}
onChange={handleModifiedChange}
>
<MenuItem value='Modified'>Modified</MenuItem>
<MenuItem value='Removed'>Removed</MenuItem>
<MenuItem value='Affected'>Affected</MenuItem>
</Select>
</FormControl>
</MenuItem>
<MenuItem>
<FormControl
variant='standard'
sx={{ m: 1, minWidth: 200 }}
>
<InputLabel>File</InputLabel>
<Select value={fileValue} onChange={handleFileChange}>
<MenuItem value='a.java'>a.java</MenuItem>
<MenuItem value='b.java'>b.java</MenuItem>
</Select>
</FormControl>
</MenuItem>
<MenuItem>
<FormControl
variant='standard'
sx={{ m: 1, minWidth: 200 }}
>
<InputLabel>Number</InputLabel>
<Select
value={numberValue}
onChange={handleNumberChange}
>
<MenuItem value={1}>1</MenuItem>
<MenuItem value={2}>2</MenuItem>
<MenuItem value={3}>3</MenuItem>
</Select>
</FormControl>
</MenuItem>
</Menu>
</div>
);
};
export default FilterComponent;