I am working on a website that has been built with react-hook-form v5 and am coming across issues with passing the value of Checkbox via submit where it is sent as undefined.

Here is the code - 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;

When the form is submitted all I receive is check1: undefined

Unfortunately I cannot move from v5 to v7 and was hoping someone may be able to help. I cant quite seem to figure out why it's not working. Cheers.