Material UI Element css not working, why?

What could be going wrong for the css to not be working(The top bar – heading overlap)?

here is the component:

<FormControl fullWidth>
                            {/* eslint-disable-next-line */}
                            <InputLabel id="simple-select-label">GT Template</InputLabel>
                            <Select labelId="simple-select-label" id="demo-simple-select-label" onChange={handleChange} value={gtTemplate}>
                                <MenuItem value="employee/addemployeeimport">Add Employee Importer</MenuItem>
                                <MenuItem value="lop-days">Employee LOP</MenuItem>
                                <MenuItem value="lop-reversal">LOP Reversal Importer</MenuItem>
                                <MenuItem value="employee/bankdetails">Employee Bank Details</MenuItem>
                                <MenuItem value="loan-detail">Employee Loan Details</MenuItem>
                                <MenuItem value="employee/employeecategory">Employee Category</MenuItem>
                                <MenuItem value="resignation">Employee Resignation</MenuItem>
                                
                            </Select>
                        </FormControl>

>Solution :

You need to add label attribute to the Select element

<Select labelId="simple-select-label" id="demo-simple-select-label" onChange={handleChange} value={gtTemplate} label="GT Template">

And this may be usefull too https://mui.com/material-ui/react-select/