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

name: 'text_box_8',
                  label: 'Text Box integer value',
                  title: 'Text Box integer value',
                  dataType: 'integer',
                  component: components.TEXT_FIELD,
                  type: 'number',
                },
                {
                  name: 'text_box_9',
                  label: 'Text Box string value',
                  title: 'Text Box string value',
                  dataType: 'string',
                  component: components.TEXT_FIELD,
                },
              ],
              component: components.SUB_FORM,
            },
            {
              title: 'Text areas',
              key: '638',
              fields: [
                {
                  name: 'textarea_box_1',
                  label: 'Text Area',
                  title: 'Text Area',
                  component: components.TEXTAREA_FIELD,
                },
              ],
              component: components.SUB_FORM,
            },
          ],
          component: components.TAB_ITEM,

title: 'Carrot',
            component: componentTypes.TEXT_FIELD,
          },
        ],
      },
    ],
  }]},
  variants: [],
},
{
  component: componentTypes.SUB_FORM,
  link: componentTypes.SUB_FORM,
  linkText: 'Subform',
  ContentText: CustomComponentText,
  value: { fields: [{
    component: componentTypes.SUB_FORM,
    title: 'Subform',
    description: 'This is a subform',
    name: 'subform',
    key: '1',
    fields: [
      {
        name: 'carrot',
        label: 'Carrot',
        title: 'Carrot',
        component: componentTypes.TEXT_FIELD,
      },
    ],
  }]},
  variants: [{
    name: 'description',
    title: 'Description',

title: 'Carrot',
            component: componentTypes.TEXT_FIELD,
          },
        ],
      },
    ],
  }]},
  variants: [],
},
{
  component: componentTypes.SUB_FORM,
  link: `?component=${componentTypes.SUB_FORM}`,
  linkText: 'Subform',
  ContentText: CustomComponentText,
  value: { fields: [{
    component: componentTypes.SUB_FORM,
    title: 'Subform',
    description: 'This is a subform',
    name: 'subform',
    key: '1',
    fields: [
      {
        name: 'carrot',
        label: 'Carrot',
        title: 'Carrot',
        component: componentTypes.TEXT_FIELD,
      },
    ],
  }]},
  variants: [{
    name: 'description',
    title: 'Description',

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',
                  label: 'Radio Button',
                  title: 'Radio Button',
                  dataType: 'string',
                  component: components.RADIO,
                  options: [
                    {
                      label: 'One',
                      value: '1',
                    },

description: 'Here you can find vegetables',
        fields: [
          {
            name: 'carrot',
            label: 'Carrot',
            title: 'Carrot',
            component: componentTypes.TEXT_FIELD,
          },
        ],
      },
    ],
  }]},
  variants: [],
},
{
  component: componentTypes.SUB_FORM,
  link: componentTypes.SUB_FORM,
  linkText: 'Subform',
  ContentText: CustomComponentText,
  value: { fields: [{
    component: componentTypes.SUB_FORM,
    title: 'Subform',
    description: 'This is a subform',
    name: 'subform',
    key: '1',
    fields: [
      {
        name: 'carrot',
        label: 'Carrot',
        title: 'Carrot',
        component: componentTypes.TEXT_FIELD,
      },

name: 'text_box_8',
                  label: 'Text Box integer value',
                  title: 'Text Box integer value',
                  dataType: 'integer',
                  component: components.TEXT_FIELD,
                  type: 'number',
                },
                {
                  name: 'text_box_9',
                  label: 'Text Box string value',
                  title: 'Text Box string value',
                  dataType: 'string',
                  component: components.TEXT_FIELD,
                },
              ],
              component: components.SUB_FORM,
            },
            {
              title: 'Text areas',
              key: '638',
              fields: [
                {
                  name: 'textarea_box_1',
                  label: 'Text Area',
                  title: 'Text Area',
                  component: components.TEXTAREA_FIELD,
                },
              ],
              component: components.SUB_FORM,
            },
          ],
          component: components.TAB_ITEM,

);

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.SUB_FORM,
    componentTypes.SWITCH,
    componentTypes.DATE_PICKER,
    componentTypes.TIME_PICKER,
  ]).isRequired,
  id: PropTypes.string,
  name: PropTypes.string.isRequired,
  dataType: PropTypes.any,
  initialKey: PropTypes.any,
};

export const TextField = props => ;
export const TextareaField = props => ;
export const SelectField = props => ;
export const Radio = props => ;
export const CheckboxGroup = props => ;
export const SwitchField = ({ FieldProvider, ...props }) =>

},
              ],
              component: components.SUB_FORM,
            },
            {
              title: 'Text areas',
              key: '638',
              fields: [
                {
                  name: 'textarea_box_1',
                  label: 'Text Area',
                  title: 'Text Area',
                  component: components.TEXTAREA_FIELD,
                },
              ],
              component: components.SUB_FORM,
            },
          ],
          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',

CheckboxGroup,
  Radio,
  SwitchField,
  DatePickerField,
  TimePickerField,
  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;

fields: [
          {
            name: 'carrot',
            label: 'Carrot',
            title: 'Carrot',
            component: componentTypes.TEXT_FIELD,
          },
        ],
      },
    ],
  }]},
  variants: [],
},
{
  component: componentTypes.SUB_FORM,
  link: `?component=${componentTypes.SUB_FORM}`,
  linkText: 'Subform',
  ContentText: CustomComponentText,
  value: { fields: [{
    component: componentTypes.SUB_FORM,
    title: 'Subform',
    description: 'This is a subform',
    name: 'subform',
    key: '1',
    fields: [
      {
        name: 'carrot',
        label: 'Carrot',
        title: 'Carrot',
        component: componentTypes.TEXT_FIELD,
      },
    ],