reactjs - react-hook-form material-ui (FormControlLabel + Checkbox) using Controller

Question

to use Material-ui in react-hook-form you should use <Controller and the method render instead of "as = {xy-control}" Also should not mix controller and inputRef = {register}. A single control is also no problem. But there is a compound control in Material-ui. "FormControlLabel + CheckBox" how do you integrate this control in the controller. All my attempts have failed.

This is how it works but I would like the FormControlLaben to be enclosed by the controller. Does somebody has any idea?

                 <Controller
                    name="password"
                    control={control}
                    defaultValue={""}
                    render={(props) => <TextField {...props}
                                                  variant="outlined"
                                                  margin="normal"
                                                  required
                                                  fullWidth
                                                  label="Password"
                                                  type="password"
                                                  id="password"
                                                  autoComplete="current-password"
                    />}
                />

                <FormControlLabel
                    control={
                        <Checkbox
                            inputRef={register}
                            name="remember"
                        />
                    }
                    label="remember"
                />


{/*That works, but it requires an OnChange. Why can't the controller bind it?*/}
                <FormControlLabel
                    control={
                        <Controller
                            name={"remember2"}
                            control={control}
                            render={(props) => (
                                <Checkbox
                                    {...props}
                                    onChange={(e) => props.onChange(e.target.checked)}

                                />
                            )}
                        />
                    }
                    label="remember"
                />

question from:https://stackoverflow.com/questions/65647029/react-hook-form-material-ui-formcontrollabel-checkbox-using-controller

Answer 1

Waitting for answers