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

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];

fields: [{
      component: componentTypes.WIZARD,
      name: 'wizzard',
      fields: [{
        title: 'Get started with adding source',
        name: 'step-1',
        stepKey: 1,
        nextStep: {
          when: 'source-type',
          stepMapper: {
            aws: 'aws',
            google: 'google',
          },
        },
        fields: [{
          component: componentTypes.TEXTAREA_FIELD,
          name: 'source-name',
          type: 'text',
          label: 'Source name',
        }, {
          component: componentTypes.SELECT_COMPONENT,
          name: 'source-type',
          label: 'Source type',
          isRequired: true,
          options: [{
            label: 'Please Choose',
          }, {
            value: 'aws',
            label: 'Aws',
          }, {
            value: 'google',
            label: 'Google',

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: 'Tab 2',
          description: 'Checks',
          key: '554',
          fields: [
            {
              title: 'Check boxes',
              key: '639',
              fields: [

component: 'input',
    value: 'First name',
  }, {
    title: 'Input Type',
    name: 'type',
    options: [ 'text', 'number', 'password' ],
  }, {
    name: 'placeholder',
    title: 'Placeholder',
    component: 'input',
  },  {
    name: 'isReadOnly',
    title: 'Read only',
  }],
}, {
  component: componentTypes.TEXTAREA_FIELD,
  link: `?component=${componentTypes.TEXTAREA_FIELD}`,
  linkText: 'Text area',
  ContentText: GenericComponentText,
  canBeRequired: true,
  value: { fields: [{
    component: componentTypes.TEXTAREA_FIELD,
    label: 'Long text',
    name: 'long-text',
  }]},
  variants: [{
    name: 'isDisabled',
    title: 'Disabled',
  }, {
    name: 'helperText',
    title: 'Helper text',
    component: 'input',

value: 'First name',
  }, {
    title: 'Input Type',
    name: 'type',
    options: [ 'text', 'number', 'password' ],
  }, {
    name: 'placeholder',
    title: 'Placeholder',
    component: 'input',
  },  {
    name: 'isReadOnly',
    title: 'Read only',
  }],
}, {
  component: componentTypes.TEXTAREA_FIELD,
  link: `?component=${componentTypes.TEXTAREA_FIELD}`,
  linkText: 'Text area',
  ContentText: GenericComponentText,
  canBeRequired: true,
  value: { fields: [{
    component: componentTypes.TEXTAREA_FIELD,
    label: 'Long text',
    name: 'long-text',
  }]},
  variants: [{
    name: 'isDisabled',
    title: 'Disabled',
  }, {
    name: 'helperText',
    title: 'Helper text',
    component: 'input',
  }, {

TextField,
  TextAreaField,
  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 = {

showTitles: true,
    description: 'Description',
    buttonsPosition: 'left',
    fields: [{
      title: 'Get started with adding source',
      name: 'step-1',
      stepKey: 1,
      nextStep: {
        when: 'source.source-type',
        stepMapper: {
          aws: 'aws',
          google: 'google',
        },
      },
      fields: [{
        component: componentTypes.TEXTAREA_FIELD,
        name: 'source.source-name',
        type: 'text',
        label: 'Source name',
      }, {
        component: componentTypes.SELECT_COMPONENT,
        name: 'source.source-type',
        label: 'Source type',
        isRequired: true,
        options: [{
          label: 'Please Choose',
        }, {
          value: 'aws',
          label: 'Aws',
        }, {
          value: 'google',
          label: 'Google',

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: 'Tab 2',
          description: 'Checks',
          key: '554',
          fields: [
            {
              title: 'Check boxes',
              key: '639',
              fields: [

component: 'input',
    value: 'First name',
  }, {
    title: 'Input Type',
    name: 'type',
    options: [ 'text', 'number', 'password' ],
  }, {
    name: 'placeholder',
    title: 'Placeholder',
    component: 'input',
  },  {
    name: 'isReadOnly',
    title: 'Read only',
  }],
}, {
  component: componentTypes.TEXTAREA_FIELD,
  link: componentTypes.TEXTAREA_FIELD,
  linkText: 'Text area',
  ContentText: GenericComponentText,
  canBeRequired: true,
  value: { fields: [{
    component: componentTypes.TEXTAREA_FIELD,
    label: 'Long text',
    name: 'long-text',
  }]},
  variants: [{
    name: 'isDisabled',
    title: 'Disabled',
  }, {
    name: 'helperText',
    title: 'Helper text',
    component: 'input',

submit: 'Add new source',
    },
    buttonsClassName: 'Foo',
    fields: [{
      title: 'Get started with adding source',
      name: 'step-1',
      stepKey: 1,
      nextStep: {
        when: 'source-type',
        stepMapper: {
          aws: 'aws',
          google: 'google',
        },
      },
      fields: [{
        component: componentTypes.TEXTAREA_FIELD,
        name: 'source-name',
        type: 'text',
        label: 'Source name',
      }, {
        component: componentTypes.SELECT_COMPONENT,
        name: 'source-type',
        label: 'Source type',
        isRequired: true,
        options: [{
          label: 'Please Choose',
        }, {
          value: 'aws',
          label: 'Aws',
        }, {
          value: 'google',
          label: 'Google',