How to use the mobx-react-form function in mobx-react-form

}
    const initials = formInitials
    const types = {
      'isSecret': 'checkbox'
    }
    const keys = {}
    const disabled = {
      'key': false
    }
    const extra = {
      'type': [{key: 'build', value: 'Build'}, {key: 'env', value: 'Normal' },{key: 'file', value: 'File'}]
    }
    const hooks = {}
    const plugins = { dvr: validatorjs }

    return new MobxReactForm({ fields, rules, disabled, labels, initials, extra, hooks, types, keys }, { plugins });
  }

const plugins = {
      dvr: {
        package: validatorjs,
        extend ($validator) {
          const messages = $validator.getMessages('en');
          messages.regex = "The name MUST NOT start or end with a '-', consist of all numeric values, or contain upper letters.";
          $validator.setMessages('en', messages);
        }
      }
    };

    const options = {
      autoParseNumbers: true
    }

    return new MobxReactForm({ fields, rules, labels, initials, extra, hooks, types, keys }, { plugins, options });
  }

'type': [
          {
            "key": "loadbalancer",
            "value": "Loadbalancer"
          },
          {
            "key": "clusterip",
            "value": "Cluster IP"
          }
        ],
        'protocol': ["TCP", "UDP"],
    }
    const hooks = {};

    const plugins = { dvr: validatorjs }
    this.form = new MobxReactForm({ fields, rules, labels, initials, types, extra, hooks }, {plugins })
  }

'type': [
          {
            "key": "loadbalancer",
            "value": "Loadbalancer"
          },
          {
            "key": "clusterip",
            "value": "Cluster IP"
          }
        ],
        'protocol': ["TCP", "UDP"]
    }
    const hooks = {};

    const plugins = { dvr: validatorjs }
    this.form = new MobxReactForm({ fields, rules, labels, initials, types, extra, hooks }, {plugins })
  }

const hooks = {
      'name': $hooks,
      'key': $hooks,
      'type': $hooks,
      'config': $hooks,
      'config[]': $hooks,
      'config[].key': $hooks,
      'config[].value': $hooks,
      'config[].allowOverride': $hooks,
      'environmentID': $hooks,
      'component': $hooks,
    }

    const handlers = {};
    const plugins = { dvr: validatorjs };
    return new MobxReactForm({ fields, rules, labels, initials, extra, hooks, types }, { handlers , plugins })    
  }

const labels = {
      'gitBranch': 'Git Branch',
      'gitUrl': 'Git Url',
      'continuousDeploy': 'Continuous Deploy',
    };
    const initials = {
    };
    const types = {
      'environments[].grant': 'checkbox',
      'continuousDeploy': 'checkbox',
    };
    const extra = {};
    const hooks = {};
    const handlers = {};
    const plugins = { dvr: validatorjs };
    this.form = new MobxReactForm({ fields, rules, labels, initials, extra, hooks, types }, { handlers }, { plugins })    
  }

};
    const keys = {};
    const disabled = {
      'name': false,
    }
    const initials = {
      'permissions': [],
    }    
    const defaults = {
      'permissions': [],
    }
    const extra = {}
    const hooks = {};
    const plugins = { dvr: validatorjs };

    this.form = new MobxReactForm({ fields, rules, disabled, labels, initials, defaults, extra, hooks, types, keys }, { plugins });    
  }