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

isDisabled={ isDisabled }
      isReadOnly={ isReadOnly }
      { ...rest }
    />
  ,
  [componentTypes.SWITCH]: () =>

component: components.TAB_ITEM,
        },
        {
          title: 'Tab 4',
          description: '',
          key: '556',
          fields: [
            {
              title: 'Datepickers',
              key: '642',
              fields: [
                {
                  name: 'date_control_1',
                  label: 'Datepicker',
                  title: 'Datepicker',
                  component: components.DATE_PICKER,
                },
                {
                  name: 'date_control_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',

component: components.SELECT,
                  name: 'date_control_select',
                  label: 'Select',
                  options: [{
                    value: 'foo',
                    label: 'Foo',
                  }, {
                    value: 'bar',
                    label: 'Bar',
                  }],
                },
                {
                  name: 'date_control_1',
                  label: 'Datepicker',
                  title: 'Datepicker with disabled days',
                  component: components.DATE_PICKER,
                  isClearable: true,
                  disabledDays: [
                    'today',
                    new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 5),
                    {
                      before: 'Tue Oct 08 2019 10:23:03 GMT+0200 (Central European Summer Time)',
                    },
                  ],
                },
                {
                  name: 'date_control_2',
                  label: 'Datepicker with past days',
                  title: 'Datepicker with past days',
                  component: components.DATE_PICKER,
                  variant: 'date-time',
                  initialValue: '2019-11-04T12:31:00.000Z',

fields: [
            {
              title: 'Datepickers',
              key: '642',
              fields: [
                {
                  name: 'date_control_1',
                  label: 'Datepicker',
                  title: 'Datepicker',
                  component: components.DATE_PICKER,
                },
                {
                  name: 'date_control_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',

fields: [
            {
              title: 'Datepickers',
              key: '642',
              fields: [
                {
                  name: 'date_control_1',
                  label: 'Datepicker',
                  title: 'Datepicker',
                  component: components.DATE_PICKER,
                },
                {
                  name: 'date_control_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',

component: components.TAB_ITEM,
        },
        {
          title: 'Tab 4',
          description: '',
          key: '556',
          fields: [
            {
              title: 'Datepickers',
              key: '642',
              fields: [
                {
                  name: 'date_control_1',
                  label: 'Datepicker',
                  title: 'Datepicker',
                  component: components.DATE_PICKER,
                },
                {
                  name: 'date_control_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',

/>),
  [componentTypes.SWITCH]: () => (
    
       input.onChange(checked) }
        /> }
        label={ label }
      />
    ),
  [componentTypes.DATE_PICKER]: () => (
    
      
    
  ),
  [componentTypes.TIME_PICKER]: () => (
    

title: 'Label',
    component: 'input',
    value: 'Switch',
  }, {
    name: 'onText',
    title: 'onText',
    component: 'input',
  }, {
    name: 'offText',
    title: 'offText',
    component: 'input',
  },
  ],
},
{
  component: componentTypes.DATE_PICKER,
  link: componentTypes.DATE_PICKER,
  linkText: 'Date picker',
  ContentText: GenericComponentText,
  canBeRequired: true,
  value: { fields: [{
    component: componentTypes.DATE_PICKER,
    label: 'Date Picker',
    name: 'date-picker',
  }]},
  variants: [{
    name: 'label',
    title: 'Label',
    component: 'input',
    value: 'Date Picker',
  }, {
    title: 'Variant',

title: 'Label',
    component: 'input',
    value: 'Switch',
  }, {
    name: 'onText',
    title: 'onText',
    component: 'input',
  }, {
    name: 'offText',
    title: 'offText',
    component: 'input',
  },
  ],
},
{
  component: componentTypes.DATE_PICKER,
  link: `?component=${componentTypes.DATE_PICKER}`,
  linkText: 'Date picker',
  ContentText: GenericComponentText,
  canBeRequired: true,
  value: { fields: [{
    component: componentTypes.DATE_PICKER,
    label: 'Date Picker',
    name: 'date-picker',
  }]},
  variants: [{
    name: 'label',
    title: 'Label',
    component: 'input',
    value: 'Date Picker',
  }, {
    title: 'Variant',

);

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 }) =>