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

{
      fields: [
        {
          title: 'Tab 1',
          description: 'Text boxes and text areas',
          key: '553',
          fields: [
            {
              title: 'Text boxes',
              key: '637',
              fields: [
                {
                  name: 'switch_1',
                  label: 'Switch',
                  title: 'Switch',
                  component: components.SWITCH,
                },
                {
                  name: 'switch_2',
                  label: 'Switch disabled',
                  component: components.SWITCH,
                  isDisabled: true,
                },
                {
                  name: 'switch_3',
                  label: 'Switch readOnly',
                  component: components.SWITCH,
                  isReadOnly: true,
                },
                {
                  name: 'text_box_2',
                  label: 'Text Box with help',

fields: [
        {
          title: 'Tab 1',
          description: 'Text boxes and text areas',
          name: '553',
          fields: [
            {
              title: 'Text boxes',
              key: '637',
              fields: [
                {
                  name: 'switch_1',
                  onText: 'Switch is on',
                  offText: 'Switch is off',
                  title: 'Switch',
                  component: components.SWITCH,
                },
                {
                  name: 'switch_2',
                  label: 'Switch disabled',
                  component: components.SWITCH,
                  isDisabled: true,
                },
                {
                  name: 'switch_3',
                  label: 'Switch readOnly',
                  component: components.SWITCH,
                  isReadOnly: true,
                },
                {
                  name: 'text_box_2',
                  label: 'Text Box with help',

{
                  name: 'switch_1',
                  label: 'Switch',
                  title: 'Switch',
                  component: components.SWITCH,
                },
                {
                  name: 'switch_2',
                  label: 'Switch disabled',
                  component: components.SWITCH,
                  isDisabled: true,
                },
                {
                  name: 'switch_3',
                  label: 'Switch readOnly',
                  component: components.SWITCH,
                  isReadOnly: true,
                },
                {
                  name: 'text_box_2',
                  label: 'Text Box with help',
                  title: 'Text Box with help',
                  helperText: 'Helper text',
                  component: components.TEXT_FIELD,
                },
                {
                  name: 'text_box_3',
                  label: 'Text Box required',
                  title: 'Text Box required',
                  isRequired: true,
                  component: components.TEXT_FIELD,
                  validate: [

import SubForm from './sub-form';
import Tabs from './tabs';
import Wizard from './wizzard/wizzard';
import Select from './select';

const mapper = {
  [componentTypes.TEXT_FIELD]: TextField,
  [componentTypes.TEXTAREA_FIELD]: TextareaField,
  [componentTypes.SELECT_COMPONENT]: SelectField,
  [componentTypes.CHECKBOX]: CheckboxGroup,
  [componentTypes.SUB_FORM]: SubForm,
  [componentTypes.RADIO]: Radio,
  [componentTypes.TABS]: Tabs,
  [componentTypes.DATE_PICKER]: DatePickerField,
  [componentTypes.TIME_PICKER]: props =&gt; <div>time picker</div>,
  [componentTypes.SWITCH]: SwitchField,
  [componentTypes.WIZARD]: Wizard,
  [componentTypes.PLAIN_TEXT]: PlainTextField,
};

export default mapper;

export const components = {
  TextField,
  TextareaField,
  SelectField,
  CheckboxGroup,
  SubForm,
  Radio,
  Tabs,
  DatePickerField,
  SwitchField,

name: 'switch_1',
                  onText: 'Switch is on',
                  offText: 'Switch is off',
                  title: 'Switch',
                  component: components.SWITCH,
                },
                {
                  name: 'switch_2',
                  label: 'Switch disabled',
                  component: components.SWITCH,
                  isDisabled: true,
                },
                {
                  name: 'switch_3',
                  label: 'Switch readOnly',
                  component: components.SWITCH,
                  isReadOnly: true,
                },
                {
                  name: 'text_box_2',
                  label: 'Text Box with help',
                  title: 'Text Box with help',
                  helperText: 'Helper text',
                  component: components.TEXT_FIELD,
                },
                {
                  name: 'text_box_3',
                  label: 'Text Box required',
                  title: 'Text Box required',
                  isRequired: true,
                  component: components.TEXT_FIELD,
                  validate: [

title: 'Placeholder',
    component: 'input',
  },
  {
    name: 'isSearchable',
    title: 'Searchable',
  }, {
    name: 'isClearable',
    title: 'Clearable',
  }, {
    name: 'simpleValue',
    title: 'Simple value',
  }],
},
{
  component: componentTypes.SWITCH,
  link: `?component=${componentTypes.SWITCH}`,
  linkText: 'Switch',
  ContentText: GenericComponentText,
  value: { fields: [{
    component: componentTypes.SWITCH,
    label: 'Switch',
    name: 'switch',
  }]},
  variants: [{
    name: 'isReadOnly',
    title: 'Read only',
  }, {
    name: 'isDisabled',
    title: 'Disabled',
  }, {
    name: 'label',

{
                  name: 'switch_1',
                  label: 'Switch',
                  title: 'Switch',
                  component: components.SWITCH,
                },
                {
                  name: 'switch_2',
                  label: 'Switch disabled',
                  component: components.SWITCH,
                  isDisabled: true,
                },
                {
                  name: 'switch_3',
                  label: 'Switch readOnly',
                  component: components.SWITCH,
                  isReadOnly: true,
                },
                {
                  name: 'text_box_2',
                  label: 'Text Box with help',
                  title: 'Text Box with help',
                  helperText: 'Helper text',
                  component: components.TEXT_FIELD,
                },
                {
                  name: 'text_box_3',
                  label: 'Text Box required',
                  title: 'Text Box required',
                  isRequired: true,
                  component: components.TEXT_FIELD,
                  validate: [

const fieldMapper = type => ({
  [componentTypes.RADIO]: FinalFormField,
  [componentTypes.CHECKBOX]: CheckboxGroupField,
  [componentTypes.SELECT_COMPONENT]: FinalFormField,
  [componentTypes.TEXTAREA_FIELD]: FinalFormField,
  [componentTypes.TEXT_FIELD]: FinalFormField,
  [componentTypes.SWITCH]: FinalFormField,
  [componentTypes.DATE_PICKER]: FinalFormField,
})[type];

FieldInterface.propTypes = {
  meta: PropTypes.object,
  condition: PropTypes.shape({
    when: PropTypes.string.isRequired,
    is: PropTypes.oneOfType([ PropTypes.array, PropTypes.string ]).isRequired,
  }),
  validate: PropTypes.oneOfType([ PropTypes.array, PropTypes.func ]),
  componentType: PropTypes.oneOf([
    componentTypes.RADIO,
    componentTypes.CHECKBOX,
    componentTypes.SELECT_COMPONENT,
    componentTypes.TEXTAREA_FIELD,
    componentTypes.TEXT_FIELD,
    componentTypes.DATE_PICKER,
    componentTypes.SWITCH,
  ]).isRequired,
  id: PropTypes.string,
  name: PropTypes.string.isRequired,
  dataType: PropTypes.any,
  initialKey: PropTypes.any,
};

export const TextField = props => ;
export const TextAreaField = props => ;
export const CheckboxField = props => ;
export const RadioField = props => ;
export const SelectField = props => ;
export const DatePickerField = props => ;
export const TimePickerField = props => ;
export const SwitchField = ({ FieldProvider, ...props }) =>

PlainTextField,
} from './form-fields';
import SubForm from './sub-form';
import Tabs from './tabs';

const mapper = {
  [componentTypes.TEXT_FIELD]: TextField,
  [componentTypes.TEXTAREA_FIELD]: TextareaField,
  [componentTypes.SELECT_COMPONENT]: SelectField,
  [componentTypes.CHECKBOX]: CheckboxGroup,
  [componentTypes.SUB_FORM]: SubForm,
  [componentTypes.RADIO]: Radio,
  [componentTypes.TABS]: Tabs,
  [componentTypes.DATE_PICKER]: DatePickerField,
  [componentTypes.TIME_PICKER]: TimePickerField,
  [componentTypes.SWITCH]: SwitchField,
  [componentTypes.PLAIN_TEXT]: PlainTextField,
};

export default mapper;