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

value: {
    fields: [{
      component: componentTypes.PLAIN_TEXT,
      name: 'plain-text-component',
      label: `Lorem ipsum sem velit. Mauris scelerisque tortor sed lorem dapibus, bibendum scelerisque ligula consequat. Quisque fringilla luctus.
Vestibulum vulputate inceptos himenaeos.`,
    }],
  },
}, {
  component: componentTypes.WIZARD,
  link: componentTypes.WIZARD,
  linkText: 'Wizard',
  ContentText: WizardText,
  value: {
    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',

name: 'label',
    title: 'Label',
    component: 'textarea',
    value: `Lorem ipsum sem velit. Mauris scelerisque tortor sed lorem dapibus, bibendum scelerisque ligula consequat. Quisque fringilla luctus.
Vestibulum vulputate inceptos himenaeos.`,
  }],
  value: {
    fields: [{
      component: componentTypes.PLAIN_TEXT,
      name: 'plain-text-component',
      label: `Lorem ipsum sem velit. Mauris scelerisque tortor sed lorem dapibus, bibendum scelerisque ligula consequat. Quisque fringilla luctus.
Vestibulum vulputate inceptos himenaeos.`,
    }],
  },
}, {
  component: componentTypes.WIZARD,
  link: componentTypes.WIZARD,
  linkText: 'Wizard',
  ContentText: WizardText,
  value: {
    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',

import { componentTypes, validatorTypes } from '@data-driven-forms/react-form-renderer';

const wizardSchema = {
  fields: [{
    component: componentTypes.WIZARD,
    name: 'wizzard',
    buttonLabels: {
      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',
        },
      },

isDisabled={ !formOptions.valid }
        onClick={ setValidating }
      >
        Validate
       :
        state === 'validating' ? <button type="button"> {} }&gt;Validating...</button> :
          renderNextButton() }
      <button type="button">{ back }</button>
      <button type="button">{ cancel }</button>
    
  );
};

export const wizardSchema = {
  fields: [{
    component: componentTypes.WIZARD,
    name: 'wizzard',
    predictSteps: true,
    //inModal: true,
    title: 'Title',
    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',

}],
          }] : []),
        ],
        value: JSON.stringify(baseStructure.value, null, 2),
        parsedSchema: baseStructure.value,
        activeMapper: 'mui',
        frameHeight: 360,
        openTooltip: false,
      };
    }

    this.mapperVariants = {
      mui: {
        formFieldsMapper: {
          ...props.mappers.mui.formFieldsMapper,
          [componentTypes.WIZARD]: MuiWizard,
          summary: Summary,
        },
        layoutMapper: props.mappers.mui.layoutMapper,
      },
      pf3: {
        formFieldsMapper: {
          ...props.mappers.pf3.formFieldsMapper,
          summary: Summary,
        },
        layoutMapper: props.mappers.pf3.layoutMapper,
      },
      pf4: {
        formFieldsMapper: {
          ...props.mappers.pf4.formFieldsMapper,
          summary: Summary,
        },

}],
          }] : []),
        ],
        value: JSON.stringify(baseStructure.value, null, 2),
        parsedSchema: baseStructure.value,
        activeMapper: 'mui',
        frameHeight: 360,
        openTooltip: false,
      };
    }

    this.mapperVariants = {
      mui: {
        formFieldsMapper: {
          ...props.mappers.mui.formFieldsMapper,
          [componentTypes.WIZARD]: MuiWizard,
          summary: Summary,
        },
        layoutMapper: props.mappers.mui.layoutMapper,
      },
      pf3: {
        formFieldsMapper: {
          ...props.mappers.pf3.formFieldsMapper,
          summary: Summary,
        },
        layoutMapper: props.mappers.pf3.layoutMapper,
      },
      pf4: {
        formFieldsMapper: {
          ...props.mappers.pf4.formFieldsMapper,
          summary: Summary,
        },

}, {
      fields: [{
        name: 'summary',
        component: 'summary',
      }],
      stepKey: 'summary',
      name: 'summary',
      substepOf: 'Summary',
      title: 'Summary',
    }],
  }],
};

export const wizardSchemaSimple = {
  fields: [{
    component: componentTypes.WIZARD,
    name: 'wizzard',
    title: 'Title',
    description: 'Description',
    buttonsPosition: 'left',
    fields: [{
      title: 'Get started with adding source',
      name: 'step-1',
      stepKey: 1,
      nextStep: 'aws',
      fields: [{
        component: componentTypes.TEXTAREA_FIELD,
        name: 'source-name',
        type: 'text',
        label: 'Source name',
      }],
    }, {

title: 'Label',
    component: 'textarea',
    value: `Lorem ipsum sem velit. Mauris scelerisque tortor sed lorem dapibus, bibendum scelerisque ligula consequat. Quisque fringilla luctus.
Vestibulum vulputate inceptos himenaeos.`,
  }],
  value: {
    fields: [{
      component: componentTypes.PLAIN_TEXT,
      name: 'plain-text-component',
      label: `Lorem ipsum sem velit. Mauris scelerisque tortor sed lorem dapibus, bibendum scelerisque ligula consequat. Quisque fringilla luctus.
Vestibulum vulputate inceptos himenaeos.`,
    }],
  },
}, {
  component: componentTypes.WIZARD,
  link: componentTypes.WIZARD,
  linkText: 'Wizard',
  ContentText: WizardText,
  value: {
    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',
          },

Promise.all(promises).then(([ pf3, pf4, mui ]) => setMappers({ loaded: true, mappers: { pf3: {
      ...pf3,
      formFieldsMapper: {
        ...pf3.formFieldsMapper,
        summary: () =&gt; <div>Pf3 summary</div>,
      },
    }, pf4: {
      ...pf4,
      formFieldsMapper: { ...pf4.formFieldsMapper, summary: () =&gt; <div>Pf4 summary</div> },
    }, mui: {
      ...mui,
      formFieldsMapper: { ...mui.formFieldsMapper, [componentTypes.WIZARD]: MuiWizzard, summary: () =&gt; <div>Mui summary</div>  },
    }}}));
  }, []);

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