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

label: 'Datepicker with past days',
                  title: 'Datepicker with past days',
                  component: components.DATE_PICKER,
                },
              ],
              component: components.SUB_FORM,
            },
            {
              title: 'Timepickers',
              key: '643',
              fields: [
                {
                  name: 'date_time_control_1',
                  label: 'Timepicker',
                  title: 'Timepicker',
                  component: components.TIME_PICKER,
                },
                {
                  name: 'date_time_control_2',
                  label: 'Timepicker with past days',
                  title: 'Timepicker with past days',
                  component: components.TIME_PICKER,
                },
              ],
              component: components.SUB_FORM,
            },
          ],
          component: components.TAB_ITEM,
        },
        {
          title: 'Tab 5',
          description: 'New tab 4',

} from './form-fields';
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,
  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,
  CheckboxField,
  RadioField,
  SelectField,
  DatePickerField,
  TimePickerField,

},
                    {
                      label: 'Two',
                      value: '2',
                    },
                    {
                      label: 'Three',
                      value: '3',
                    },
                  ],
                },
                {
                  name: 'date_time_control_3',
                  label: 'Timepicker',
                  title: 'Timepicker',
                  component: components.TIME_PICKER,
                },
              ],
              component: components.SUB_FORM,
            },
          ],
          component: components.TAB_ITEM,
        },
      ],
      component: components.TABS,
      key: '57',
    },
  ],
};

export const defaultValues = {
  text_box_5: '"hello"', check_box_2: 'true', radio_button_4: '2', dropdown_list_2: '2',

label: 'Datepicker with past days',
                  title: 'Datepicker with past days',
                  component: components.DATE_PICKER,
                },
              ],
              component: components.SUB_FORM,
            },
            {
              title: 'Timepickers',
              key: '643',
              fields: [
                {
                  name: 'date_time_control_1',
                  label: 'Timepicker',
                  title: 'Timepicker',
                  component: components.TIME_PICKER,
                },
                {
                  name: 'date_time_control_2',
                  label: 'Timepicker with past days',
                  title: 'Timepicker with past days',
                  component: components.TIME_PICKER,
                },
              ],
              component: components.SUB_FORM,
            },
          ],
          component: components.TAB_ITEM,
        },
        {
          title: 'Mixed',
          description: '',

title: 'Show today button',
  }, {
    name: 'todayButtonLabel',
    component: 'input',
    value: 'Today',
    title: 'Today button label',
  }, {
    name: 'closeOnDaySelect',
    title: 'Close on day select',
  }, {
    name: 'isClearable',
    title: 'Clearable',
  }],
},
{
  component: componentTypes.TIME_PICKER,
  link: componentTypes.TIME_PICKER,
  linkText: 'Time picker',
  ContentText: GenericComponentText,
  canBeRequired: true,
  value: { fields: [{
    component: componentTypes.TIME_PICKER,
    label: 'Time Picker',
    name: 'time-picker',
  }]},
  variants: [{
    name: 'label',
    title: 'Label',
    component: 'input',
    value: 'Time Picker',
  },
  ],

}, {
    name: 'todayButtonLabel',
    component: 'input',
    value: 'Today',
    title: 'Today button label',
  }, {
    name: 'closeOnDaySelect',
    title: 'Close on day select',
  }, {
    name: 'isClearable',
    title: 'Clearable',
  }],
},
{
  component: componentTypes.TIME_PICKER,
  link: `?component=${componentTypes.TIME_PICKER}`,
  linkText: 'Time picker',
  ContentText: GenericComponentText,
  canBeRequired: true,
  value: { fields: [{
    component: componentTypes.TIME_PICKER,
    label: 'Time Picker',
    name: 'time-picker',
  }]},
  variants: [{
    name: 'label',
    title: 'Label',
    component: 'input',
    value: 'Time Picker',
  },
  ],
},

export const TimePickerField = props => ;
export const PlainTextField = ({ label, name }) =>

label: 'Datepicker with past days',
                  title: 'Datepicker with past days',
                  component: components.DATE_PICKER,
                },
              ],
              component: components.SUB_FORM,
            },
            {
              title: 'Timepickers',
              key: '643',
              fields: [
                {
                  name: 'date_time_control_1',
                  label: 'Timepicker',
                  title: 'Timepicker',
                  component: components.TIME_PICKER,
                },
                {
                  name: 'date_time_control_2',
                  label: 'Timepicker with past days',
                  title: 'Timepicker with past days',
                  component: components.TIME_PICKER,
                },
              ],
              component: components.SUB_FORM,
            },
          ],
          component: components.TAB_ITEM,
        },
        {
          title: 'Mixed',
          description: '',

}, {
    name: 'closeOnDaySelect',
    title: 'Close on day select',
  }, {
    name: 'isClearable',
    title: 'Clearable',
  }],
},
{
  component: componentTypes.TIME_PICKER,
  link: componentTypes.TIME_PICKER,
  linkText: 'Time picker',
  ContentText: GenericComponentText,
  canBeRequired: true,
  value: { fields: [{
    component: componentTypes.TIME_PICKER,
    label: 'Time Picker',
    name: 'time-picker',
  }]},
  variants: [{
    name: 'label',
    title: 'Label',
    component: 'input',
    value: 'Time Picker',
  },
  ],
},
{
  component: componentTypes.TABS,
  link: componentTypes.TABS,
  linkText: 'Tabs / Tab item',
  ContentText: TabsText,