Why does radio button only take the first FormControlLabel
Like in this example
<FormControl component="fieldset">
<FormHelperText
sx={{
fontWeight: 500,
margin: "10px 0",
fontSize: 16,
color: "#11142d",
}}
>
Lesson status
</FormHelperText>
<RadioGroup
row
aria-labelledby="demo-radio-buttons-group-label"
name="use-radio-group"
{...register("status", { required: true })}
>
<FormControlLabel
value="Active"
control={<Radio />}
label="Active"
/>
<FormControlLabel
value="Pending"
control={<Radio />}
label="Pending"
/>
<FormControlLabel
value="Inactive"
control={<Radio />}
label="Inactive"
/>
</RadioGroup>
</FormControl>
i cna only submit my form if the first FormControlLabel is ticked "Active" and when i click "pending" it didn't go through like cannot submit
<FormControl component="fieldset">
<FormHelperText
sx={{
fontWeight: 500,
margin: "10px 0",
fontSize: 16,
color: "#11142d",
}}
>
Lesson status
</FormHelperText>
<RadioGroup
row
aria-labelledby="demo-radio-buttons-group-label"
name="use-radio-group"
{...register("status", { required: true })}
>
<FormControlLabel
value="Active"
control={<Radio />}
label="Active"
/>
<FormControlLabel
value="Pending"
control={<Radio />}
label="Pending"
/>
<FormControlLabel
value="Inactive"
control={<Radio />}
label="Inactive"
/>
</RadioGroup>
</FormControl>
i cna only submit my form if the first FormControlLabel is ticked "Active" and when i click "pending" it didn't go through like cannot submit
