How to use the downshift.stateChangeTypes function in downshift

stateReducer = (state: DownshiftState, changes: StateChangeOptions) => {
    switch (changes.type) {
      case Downshift.stateChangeTypes.blurInput:
        if (state.inputValue) return {}; // remain open on iOS
        this.closeSelect();

        return changes;

      case Downshift.stateChangeTypes.keyDownEnter:
      case Downshift.stateChangeTypes.clickItem:
        // Don't reset isOpen, inputValue and highlightedIndex when item is selected
        return omit(changes, ['isOpen', 'inputValue', 'highlightedIndex']);

      case Downshift.stateChangeTypes.mouseUp:
      case Downshift.stateChangeTypes.touchEnd:
        // Retain input on blur
        return omit(changes, 'inputValue');

      default:
        return changes;
    }
  };

downshiftStateReducer = (
    state: DownshiftState,
    changes: StateChangeOptions
  ) => {
    const { value } = this.props;
    switch (changes.type) {
      // Don't clear the field value when we leave the field
      case Downshift.stateChangeTypes.blurInput:
      case Downshift.stateChangeTypes.mouseUp:
        return {
          ...changes,
          inputValue: pathOr('', ['label'], this.optionsIdx[value]),
          isOpen: false
        };
      default:
        return changes;
    }
  };

createCalendarItems,
  createSuggestedItems,
  parseInputText,
} from '@commercetools-uikit/calendar-time-utils';
import { parseTime } from '../../../utils/parse-time';
import CalendarBody from '../../internals/calendar-body';
import CalendarMenu from '../../internals/calendar-menu';
import CalendarHeader from '../../internals/calendar-header';
import CalendarContent from '../../internals/calendar-content';
import CalendarDay from '../../internals/calendar-day';
import TimeInput from './time-input';
import messages from './messages';

const activationTypes = [
  Downshift.stateChangeTypes.keyDownEnter,
  Downshift.stateChangeTypes.clickItem,
];

const preventDownshiftDefault = event => {
  // eslint-disable-next-line no-param-reassign
  event.nativeEvent.preventDownshiftDefault = true;
};

// This keeps the menu open when the user focuses the time input (thereby
// blurring the regular input/toggle button)
const createBlurHandler = timeInputRef => event => {
  event.persist();
  if (event.relatedTarget === timeInputRef.current) {
    preventDownshiftDefault(event);
  }
};

function stateReducer(state, changes) {
  // this prevents the menu from being closed when the user
  // selects an item with a keyboard or mouse
  switch (changes.type) {
    case Downshift.stateChangeTypes.keyDownEnter:
    case Downshift.stateChangeTypes.clickItem:
      return {
        ...changes,
        isOpen: state.isOpen,
        highlightedIndex: state.highlightedIndex,
      }
    default:
      return changes
  }
}

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(

stateReducer = (state: DownshiftState, changes: StateChangeOptions) => {
    switch (changes.type) {
      case Downshift.stateChangeTypes.blurInput:
        return omit(changes, 'inputValue');
      default:
        return changes;
    }
  };

handleStateChange(changes: StateChangeOptions) {
    const multiple = this.props.multiple || this.props.multi;
    switch (changes.type) {
      case Downshift.stateChangeTypes.itemMouseEnter:
        this.setState({
          isOpen: true
        });
        break;
      case Downshift.stateChangeTypes.changeInput:
        this.setState({
          isOpen: true
        });
        break;
      default:
        const state: TextState = {};
        if (typeof changes.isOpen !== 'undefined') {
          state.isOpen = changes.isOpen;
        }

        if (typeof changes.highlightedIndex !== 'undefined') {

handleOnInputValueChange = (inputValue, { type }) => {
    if (type === Downshift.stateChangeTypes.changeInput)
      this.setState(() => {
        if (Array.isArray(inputValue)) {
          return {
            inputValue: '',
          };
        }
        return {
          inputValue: inputValue || '',
        };
      });
  };

handleOnInputValueChange = (inputValue, { type }) => {
    if (type === Downshift.stateChangeTypes.changeInput)
      this.setState(() => {
        if (Array.isArray(inputValue)) {
          return {
            inputValue: '',
          };
        }
        return {
          inputValue: inputValue || '',
        };
      });
  };

const highlightedIndexOnArrowKeyOpen = this.getHighlightedIndexOnArrowKeyOpen(changes)
        if (_.isNumber(highlightedIndexOnArrowKeyOpen)) {
          newState.highlightedIndex = highlightedIndexOnArrowKeyOpen
        }
        if (!this.props.search) {
          this.listRef.current.focus()
        }
      } else {
        newState.highlightedIndex = null
      }

      this.setStateAndInvokeHandler('onOpenChange', null, newState)
    }

    if (this.state.open && _.isNumber(changes.highlightedIndex)) {
      const itemIsFromKeyboard = changes.type !== Downshift.stateChangeTypes.itemMouseEnter
      this.setState({ itemIsFromKeyboard, highlightedIndex: changes.highlightedIndex })
    }
  }