Estoy trabajando en un sitio web que se ha creado con react-hook-form v5 y me encuentro con problemas al pasar el valor de Checkbox a través de envío donde se envía como indefinido.

Aquí está el código - Form.tsx:

 import { Controller, useForm } from 'react-hook-form'; export interface FormProps { onSubmit: (data: any) => void; validationSchema: any; defaultValues: any; } const Form = (props: FormProps): JSX.Element => { const { handleSubmit, errors, control, register, formState, watch, reset } = useForm({ defaultValues: props.defaultValues, validationSchema: props.validationSchema, }); return ( <form onSubmit={handleSubmit(props.onSubmit)}> <CheckboxController control={control} checked={oneNot} label={"Check 1"} name="check1" handleChange={handleCheckbox} /> <SubmitButton /> <form /> ); }; export default Form;

CheckboxController.tsx:

 import * as React from 'react'; import { Controller, Control } from 'react-hook-form'; import Checkbox from '@material-ui/core/Checkbox'; import styled from 'styled-components'; export interface CheckboxProps { control: Control; checked: boolean | undefined; label: any; name: string; handleChange(event: any): any; } const CheckboxController = (props: CheckboxProps) => { return ( <Controller as={ <label> <Checkbox checked={props.checked} name={props.name} onChange={props.handleChange} /> {props.label} </label> } control={props.control} name={props.name} /> ); }; export default CheckboxController;

Cuando se envía el formulario, todo lo que recibo es check1: undefined

Desafortunadamente, no puedo pasar de v5 a v7 y esperaba que alguien pudiera ayudar. Parece que no puedo entender por qué no funciona. Salud.