How to use the @plone/volto/helpers.getVocabFromItems function in @plone/volto

(state, props) => {
    const vocabBaseUrl =
      getVocabFromHint(props) ||
      getVocabFromField(props) ||
      getVocabFromItems(props);
    const vocabState = state.vocabularies[vocabBaseUrl];
    if (vocabState) {
      return {
        vocabState,
        choices: vocabState.items,
        itemsTotal: vocabState.itemsTotal,
        loading: Boolean(vocabState.loading),
      };
    }
    return {};
  },
  { getVocabulary, getVocabularyTokenTitle },

constructor(props) {
    super(props);
    this.search = this.search.bind(this);
    this.loadOptions = this.loadOptions.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.vocabBaseUrl =
      getVocabFromHint(props) ||
      getVocabFromField(props) ||
      getVocabFromItems(props);
    this.state = {
      search: '',
      selectedOption: props.value
        ? props.value.map(item =>
            isObject(item)
              ? { label: item.title, value: item.token }
              : { label: item, value: item },
          )
        : [],
    };
  }

(state, props) => {
    const vocabBaseUrl =
      getVocabFromHint(props) ||
      getVocabFromField(props) ||
      getVocabFromItems(props);
    const vocabState = state.vocabularies[vocabBaseUrl];
    if (vocabState) {
      return {
        choices: vocabState.items,
        itemsTotal: vocabState.itemsTotal,
        loading: Boolean(vocabState.loading),
      };
    }
    return {};
  },
  dispatch => bindActionCreators({ getVocabulary }, dispatch),

(state, props) => {
    const vocabBaseUrl =
      getVocabFromHint(props) ||
      getVocabFromField(props) ||
      getVocabFromItems(props);
    const vocabState = state.vocabularies[vocabBaseUrl];
    if (vocabState) {
      return {
        choices: vocabState.items
          ? vocabState.items.map(item => ({
              label: item.value,
              value: item.value,
            }))
          : [],
        itemsTotal: vocabState.itemsTotal,
        loading: Boolean(vocabState.loading),
      };
    }
    return {};
  },
  { getVocabulary },

constructor(props) {
    super(props);
    this.search = this.search.bind(this);
    this.loadOptions = this.loadOptions.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.vocabBaseUrl =
      getVocabFromHint(props) ||
      getVocabFromField(props) ||
      getVocabFromItems(props);
    this.state = {
      selectedOption: props.value
        ? props.value.map(item => ({ label: item, value: item }))
        : [],
    };
  }

/**
   * Component did mount
   * @method componentDidMount
   * @returns {undefined}
   */
  componentDidMount() {
    if (this.vocabBaseUrl) {
      this.props.getVocabulary(this.vocabBaseUrl);
    }
  }

  vocabBaseUrl =
    getVocabFromHint(this.props) ||
    getVocabFromField(this.props) ||
    getVocabFromItems(this.props);

  /**
   * Initiate search with new query
   * @method loadOptions
   * @param {string} search Search query.
   * @param {string} previousOptions The previous options rendered.
   * @param {string} additional Additional arguments to pass to the next loadOptions.
   * @returns {undefined}
   */
  loadOptions = (search, previousOptions, additional) => {
    const offset = this.state.search !== search ? 0 : additional.offset;
    this.props.getVocabulary(this.vocabBaseUrl, search, offset);
    this.setState({ search });
    return {
      options: this.props.choices,
      hasMore: this.props.itemsTotal > 25,