How to use the @data-driven-forms/react-form-renderer.componentTypes.CHECKBOX function in @data-driven-forms/react-form-renderer

CheckboxField,
  RadioField,
  SelectField,
  DatePickerField,
  TimePickerField,
  SwitchField,
  PlainTextField,
} from './form-fields';
import Wizard from './wizard/wizard';
import { Select } from './select/select';

const mapper = {
  [componentTypes.TEXT_FIELD]: TextField,
  [componentTypes.TEXTAREA_FIELD]: TextAreaField,
  [componentTypes.SELECT_COMPONENT]: SelectField,
  [componentTypes.CHECKBOX]: CheckboxField,
  [componentTypes.SUB_FORM]: SubForm,
  [componentTypes.RADIO]: RadioField,
  [componentTypes.TABS]: Tabs,
  [componentTypes.DATE_PICKER]: DatePickerField,
  [componentTypes.TIME_PICKER]: TimePickerField,
  [componentTypes.TAG_CONTROL]: props =&gt; <div>Unsupported tag control</div>,
  [componentTypes.WIZARD]: Wizard,
  [componentTypes.SWITCH]: SwitchField,
  [componentTypes.PLAIN_TEXT]: PlainTextField,
};

export default mapper;

export const components = {
  TextField,
  TextAreaField,

value: 'This is a subform',
  }, {
    name: 'title',
    title: 'Title',
    component: 'input',
    value: 'Subform',
  },
  ],
},
{
  component: 'checkbox-multiple',
  link: '?component=checkbox-multiple',
  linkText: 'Checkbox multiple',
  ContentText: GenericComponentText,
  value: { fields: [{
    component: componentTypes.CHECKBOX,
    label: 'Checkbox',
    name: 'checkbox',
    options: [
      { label: 'Dog', value: '1' },
      { label: 'Cats', value: '2' },
      { label: 'Hamsters', value: '3' },
    ],
  }]},
  variants: [{
    name: 'isDisabled',
    title: 'Disabled',
  }, {
    name: 'label',
    title: 'Label',
    component: 'input',
    value: 'Checkbox',

{ ...input }
      error={ invalid }
      required={ isRequired }
      helperText={ helperText }
      disabled={ isDisabled }
      label={ label }
      placeholder={ placeholder }
      fullWidth
      multiline
      inputProps={{
        readOnly: isReadOnly,
      }}
      { ...rest }
    />
  ),
  [componentTypes.CHECKBOX]: () => (
     }
      label={ label }
    />
  ),
  [componentTypes.RADIO]: () => (
    
  ),
  [componentTypes.SELECT_COMPONENT]: () => (

}, {
    name: 'label',
    title: 'Label',
    component: 'input',
    value: 'Long text',
  }, {
    name: 'placeholder',
    title: 'Placeholder',
    component: 'input',
  },  {
    name: 'isReadOnly',
    title: 'Read only',
  }],
},
{
  component: componentTypes.CHECKBOX,
  link: `?component=${componentTypes.CHECKBOX}`,
  prev: {
    link: '/renderer/form-controls',
    label: 'Form Controls',
  },
  linkText: 'Checkbox',
  ContentText: GenericComponentText,
  value: { fields: [{
    component: componentTypes.CHECKBOX,
    label: 'Checkbox',
    name: 'checkbox',
  }]},
  variants: [{
    name: 'isDisabled',
    title: 'Disabled',
  }, {

value: 'This is a subform',
  }, {
    name: 'title',
    title: 'Title',
    component: 'input',
    value: 'Subform',
  },
  ],
},
{
  component: 'checkbox-multiple',
  link: 'checkbox-multiple',
  linkText: 'Checkbox multiple',
  ContentText: GenericComponentText,
  value: { fields: [{
    component: componentTypes.CHECKBOX,
    label: 'Checkbox',
    name: 'checkbox',
    options: [
      { label: 'Dog', value: '1' },
      { label: 'Cats', value: '2' },
      { label: 'Hamsters', value: '3' },
    ],
  }]},
  variants: [{
    name: 'isDisabled',
    title: 'Disabled',
  }, {
    name: 'label',
    title: 'Label',
    component: 'input',
    value: 'Checkbox',

name: 'text_box_10',
                  label: 'Text Box',
                  title: 'Text Box',
                  component: components.TEXT_FIELD,
                },
                {
                  name: 'textarea_box_2',
                  label: 'Text Area',
                  title: 'Text Area',
                  component: components.TEXTAREA_FIELD,
                },
                {
                  name: 'check_box_3',
                  label: 'Check Box',
                  title: 'Check Box',
                  component: components.CHECKBOX,
                },
                {
                  name: 'check_box_4',
                  label: 'Check Box',
                  title: 'Check Box',
                  component: components.CHECKBOX,
                },
                {
                  name: 'dropdown_list_5',
                  label: 'Dropdown',
                  title: 'Dropdown',
                  dataType: 'string',
                  component: components.SELECT_COMPONENT,
                  options: [
                    {
                      label: '',

component: components.TAB_ITEM,
        },
        {
          title: 'Tab 2',
          description: 'Checks',
          key: '554',
          fields: [
            {
              title: 'Check boxes',
              key: '639',
              fields: [
                {
                  name: 'check_box_1',
                  label: 'Check Box',
                  title: 'Check Box',
                  component: components.CHECKBOX,
                },
                {
                  name: 'check_box_2',
                  label: 'Check Box checked',
                  title: 'Check Box checked',
                  component: components.CHECKBOX,
                },
              ],
              component: components.SUB_FORM,
            },
            {
              title: 'Radios',
              key: '640',
              fields: [
                {
                  name: 'radio_button_1',

description: 'Description of testing Dialog',
  fields: [
    {
      fields: [
        {
          title: 'Tab 1',
          description: 'Text boxes and text areas',
          name: '553',
          fields: [
            {
              name: 'check_box_1',
              label: 'Check Box',
              title: 'Check Box',
              helperText: 'aaaa',
              description: 'description',
              component: components.CHECKBOX,
              options: [
                {
                  label: 'Dog',
                  value: '1',
                },
                {
                  label: 'Cats',
                  value: '2',
                },
                {
                  label: 'Hamsters',
                  value: '3',
                },
              ],
            },
            {

}, {
    name: 'label',
    title: 'Label',
    component: 'input',
    value: 'Long text',
  }, {
    name: 'placeholder',
    title: 'Placeholder',
    component: 'input',
  },  {
    name: 'isReadOnly',
    title: 'Read only',
  }],
},
{
  component: componentTypes.CHECKBOX,
  link: componentTypes.CHECKBOX,
  prev: {
    link: '/renderer/form-controls',
    label: 'Form Controls',
  },
  linkText: 'Checkbox',
  ContentText: GenericComponentText,
  value: { fields: [{
    component: componentTypes.CHECKBOX,
    label: 'Checkbox',
    name: 'checkbox',
  }]},
  variants: [{
    name: 'isDisabled',
    title: 'Disabled',
  }, {

component: components.TAB_ITEM,
        },
        {
          title: 'Tab 2',
          description: 'Checks',
          key: '554',
          fields: [
            {
              title: 'Check boxes',
              key: '639',
              fields: [
                {
                  name: 'check_box_1',
                  label: 'Check Box',
                  title: 'Check Box',
                  component: components.CHECKBOX,
                },
                {
                  name: 'check_box_2',
                  label: 'Check Box checked',
                  title: 'Check Box checked',
                  component: components.CHECKBOX,
                },
              ],
              component: components.SUB_FORM,
            },
            {
              title: 'Radios',
              key: '640',
              fields: [
                {
                  name: 'radio_button_1',