Material Ui label breaking in Select component

Question

i have been trying to implement a select component, nothing as I have ever done before, But suddenly my mui-select component is breaking, Below is the image of the bug/issue i am facing

The label of the select element is no longer in sync with the select component itself Here is the code:

                           <FormControl size="small" fullWidth>
                                    <InputLabel id="demo-simple-select-helper">
                                        Marital Status
                                    </InputLabel>
                                    <Select
                                        labelId="demo-simple-select-helper"
                                        id="demo-simple-select-helper"
                                        label="Marital Status"
                                        defaultValue=""
                                        {...getFieldProps('pf.maritalStatus')}
                                    >
                                        <MenuItem value="married">Married</MenuItem>
                                        <MenuItem value="unmarried">Unmarried</MenuItem>
                                        <MenuItem value="widow">Widow</MenuItem>
                                        <MenuItem value="widower">Widower</MenuItem>
                                        <MenuItem value="divorcee">Divorcee</MenuItem>
                                    </Select>
                                </FormControl>

Is there anything wrong i am doing here?

Here is the snippet used in the mui docs

<FormControl fullWidth>
  <InputLabel id="demo-simple-select-label">Age</InputLabel>
  <Select
    labelId="demo-simple-select-label"
    id="demo-simple-select"
    value={age}
    label="Age"
    onChange={handleChange}
  >
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>Twenty</MenuItem>
    <MenuItem value={30}>Thirty</MenuItem>
  </Select>
</FormControl>

Please can anyone tell what's wrong i am doing here?

Answer 1

const [age,setAge] = React.useState();
function handleChange(e){
   setAge(e.currentTarget.value);
}
return(
   <FormControl fullWidth>
     <InputLabel id="demo-simple-select-label">Age</InputLabel>
      <Select
        labelId="demo-simple-select-label"
        id="demo-simple-select"
        value={age}
        label="Age"
        onChange={handleChange}
      >
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </Select>
    </FormControl>
)