Material ui Checkbox is not working in React-hook form - yup

Question

I want to make a Form with validation for that I used react-hook-form with Material UI. And for validation, yup and hook/resolver are also used. when I click the Checkbox I want to show another textField but the checkbox is not working. watch is used for that which comes from react-hook-form(useForm). what is my mistake? plz, help.
Here is my code: - codesanbox

Answer 1

You've to use the Controller or useController for the MUI checkbox, for instance:
<Controller
name="hasPhone"
control={control}
render={({ field }) => (
<FormControlLabel
control={
<Checkbox
defaultValue={data.hasPhone}
defaultChecked={data.hasPhone}
color="primary"
onChange={(e) => field.onChange(e.target.checked)}
checked={field.value}
/>
}
label="Do you have a phone"
/>
)}
/>
👉🏻 https://codesandbox.io/s/practical-morning-v6yp1

Answer 2

for those who are struggling with MUI5, NextJs 12 and RHF 7 in typescript, here is how I make it working
Please note that the RHF Controller is inside the FormControlLabel and not the opposite. Also the defaultValue matters
import { FormControlLabel } from "#mui/material";
import Checkbox, { CheckboxProps } from "#mui/material/Checkbox";
import { Control, Controller } from "react-hook-form";
type ICheckBoxFieldProps = CheckboxProps & {
name: string;
control: Control;
label: string;
};
const CheckBoxField: React.FC<ICheckBoxFieldProps> = ({
name,
control,
label,
defaultChecked,
...rest
}: ICheckBoxFieldProps): JSX.Element => {
return (
<FormControlLabel
label={label}
control={
<Controller
name={name}
control={control}
defaultValue={!!defaultChecked}
render={({ field }) => (
<Checkbox
checked={field.value}
onChange={field.onChange}
{...rest}
/>
)}
/>
}
/>
);
};
export default CheckBoxField;
and how to call it inside a form or a FormProvider
<CheckBoxField
name="istrue"
control={control}
defaultChecked={true}
label="isTrue"
color="success"
/>