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

placeholder={ placeholder }
      fullWidth
      multiline
      inputProps={{
        readOnly: isReadOnly,
      }}
      { ...rest }
    />
  ),
  [componentTypes.CHECKBOX]: () => (
     }
      label={ label }
    />
  ),
  [componentTypes.RADIO]: () => (
    
  ),
  [componentTypes.SELECT_COMPONENT]: () => (
     option.hasOwnProperty('value') && option.value !== null)} // eslint-disable-line
      placeholder={ placeholder || 'Please choose' }
      value={ options.filter(({ value }) => rest.multi ? input.value.includes(value) : value === input.value) }
      isMulti={ rest.multi }

component: componentTypes.CHECKBOX,
    label: 'Checkbox',
    name: 'checkbox',
  }]},
  variants: [{
    name: 'isDisabled',
    title: 'Disabled',
  }, {
    name: 'label',
    title: 'Label',
    component: 'input',
    value: 'Checkbox',
  }],
},
{
  component: componentTypes.RADIO,
  link: `?component=${componentTypes.RADIO}`,
  linkText: 'Radio',
  ContentText: GenericComponentText,
  canBeRequired: true,
  value: { fields: [{
    component: componentTypes.RADIO,
    label: 'Radio',
    name: 'radio',
    options: [
      { label: 'Dogs', value: '1' },
      { label: 'Cats', value: '2' },
      { label: 'Hamsters', value: '3' },
    ],
  }]},
  variants: [{
    name: 'isDisabled',

title: 'Disabled',
  }, {
    name: 'label',
    title: 'Label',
    component: 'input',
    value: 'Checkbox',
  }],
},
{
  component: componentTypes.RADIO,
  link: componentTypes.RADIO,
  linkText: 'Radio',
  ContentText: GenericComponentText,
  canBeRequired: true,
  value: { fields: [{
    component: componentTypes.RADIO,
    label: 'Radio',
    name: 'radio',
    options: [
      { label: 'Dogs', value: '1' },
      { label: 'Cats', value: '2' },
      { label: 'Hamsters', value: '3' },
    ],
  }]},
  variants: [{
    name: 'isDisabled',
    title: 'Disabled',
  }, {
    name: 'label',
    title: 'Label',
    component: 'input',
    value: 'Radio',

SwitchField,
  DatePickerField,
  PlainTextField,
} 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,

{
                      label: 'Two',
                      value: '2',
                    },
                    {
                      label: 'Three',
                      value: '3',
                    },
                  ],
                },
                {
                  name: 'radio_button_2',
                  label: 'Radio Button sorted by',
                  title: 'Radio Button sorted by',
                  dataType: 'string',
                  component: components.RADIO,
                  options: [
                    {
                      label: 'One',
                      value: '1',
                    },
                    {
                      label: 'Two',
                      value: '2',
                    },
                    {
                      label: 'Three',
                      value: '3',
                    },
                  ],
                },
                {

{
                      label: 'Three',
                      value: '3',
                    },
                    {
                      label: 'Two',
                      value: '2',
                    },
                  ],
                },
                {
                  name: 'radio_button_3',
                  label: 'Radio Button',
                  title: 'Radio Button',
                  dataType: 'string',
                  component: components.RADIO,
                  options: [
                    {
                      label: 'One',
                      value: '1',
                    },
                    {
                      label: 'Two',
                      value: '2',
                    },
                    {
                      label: 'Three',
                      value: '3',
                    },
                  ],
                },
                {

fieldMapper(componentType)({
    ...props,
    componentType,
    id: props.id || props.name,
  })
);

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

{
                      label: 'Two',
                      value: '2',
                    },
                    {
                      label: 'Three',
                      value: '3',
                    },
                  ],
                },
                {
                  name: 'radio_button_2',
                  label: 'Radio Button sorted by',
                  title: 'Radio Button sorted by',
                  dataType: 'string',
                  component: components.RADIO,
                  options: [
                    {
                      label: 'One',
                      value: '1',
                    },
                    {
                      label: 'Two',
                      value: '2',
                    },
                    {
                      label: 'Three',
                      value: '3',
                    },
                  ],
                },
                {

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

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;