How to use the @commercetools-uikit/calendar-utils.formatRange function in @commercetools-uikit/calendar-utils

static getDerivedStateFromProps(props, state) {
    // We need to update the input value string in case so that is is formatted
    // according to the locale and holds the current value in case the value
    // changes or when the locale changes
    const shouldUpdateInputValue =
      !isSameRange(props.value, state.prevValue) ||
      props.intl.locale !== state.prevLocale;

    if (!shouldUpdateInputValue) return null;

    return {
      prevLocale: props.intl.locale,
      // This is not the input value but the actual value passed to
      // DateRangeCalendar
      prevValue: props.value,
      inputValue: formatRange(props.value, props.intl.locale),
    };
  }
  inputRef = React.createRef();

this.setState(prevState => {
              // ensure input value matches prop value when menu is closed
              if (
                changes.type === Downshift.stateChangeTypes.mouseUp ||
                changes.type === Downshift.stateChangeTypes.blurInput
              ) {
                return {
                  highlightedIndex: null,
                  isOpen: false,
                  inputValue: formatRange(
                    this.props.value,
                    this.props.intl.locale
                  ),
                };
              }

              if (changes.hasOwnProperty('selectedItem')) {
                const hasStartedRangeSelection = Boolean(
                  !prevState.startDate && changes.selectedItem
                );
                const hasFinishedRangeSelection = Boolean(
                  prevState.startDate && changes.selectedItem
                );

                return {
                  highlightedIndex: prevState.highlightedIndex,

inputValue: (() => {
                    if (hasFinishedRangeSelection) {
                      return formatRange(
                        [prevState.startDate, changes.selectedItem],
                        this.props.intl.locale
                      );
                    }
                    if (hasStartedRangeSelection) {
                      return formatRange(
                        [changes.selectedItem],
                        this.props.intl.locale
                      );
                    }
                    return '';
                  })(),
                };