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

onStateChange={changes => {
          /* eslint-disable no-prototype-builtins */
          if (changes.hasOwnProperty('inputValue')) {
            // input changed because user typed
            if (changes.type === Downshift.stateChangeTypes.changeInput) {
              const date = parseInputToDate(changes.inputValue, intl.locale);
              if (date === '') {
                setSuggestedItems([]);
                setHighlightedIndex(null);
              } else {
                setSuggestedItems([date]);
                setHighlightedIndex(getDateInMonth(date) - 1);
                setCalendarDate(date);
              }
            } else {
              // input changed because user selected a date
              setSuggestedItems([]);
              setHighlightedIndex(null);
            }
          }

          if (changes.hasOwnProperty('highlightedIndex')) {
            setHighlightedIndex(changes.highlightedIndex);
          }

          // ensure calendar always opens on selected item, or on current
          // month when there is no selected item
          if (changes.hasOwnProperty('isOpen') && changes.isOpen) {

const DateInput = props => {
  const intl = useIntl();
  const [calendarDate, setCalendarDate] = React.useState(
    props.value || getToday()
  );
  const [suggestedItems, setSuggestedItems] = React.useState([]);
  const [highlightedIndex, setHighlightedIndex] = React.useState(
    props.value === '' ? null : getDateInMonth(props.value) - 1
  );
  const inputRef = React.useRef();

  const { onChange } = props;
  const emit = React.useCallback(
    value =>
      onChange({
        target: {
          id: props.id,
          name: props.name,
          // when cleared the value is null, but we always want it to be an
          // empty string when there is no value.
          value: value || '',
        },
      }),
    [onChange, props.id, props.name]

const showToday = () => {
    const today = getToday();
    setCalendarDate(today);
    setHighlightedIndex(suggestedItems.length + getDateInMonth(today) - 1);
    inputRef.current.focus();
  };

prevState => ({
        calendarDate: today,
        highlightedIndex:
          prevState.suggestedItems.length + getDateInMonth(today) - 1,
      }),
      () => this.inputRef.current.focus()

};
              if (parsedRange.length === 1) {
                const calendarDate = parsedRange[0];
                return {
                  suggestedItems: [],
                  highlightedIndex: getDateInMonth(calendarDate) - 1,
                  inputValue,
                  startDate: parsedRange[0],
                  calendarDate,
                };
              }
              if (parsedRange.length === 2) {
                const calendarDate = parsedRange[1];
                return {
                  suggestedItems: [],
                  highlightedIndex: getDateInMonth(calendarDate) - 1,
                  inputValue,
                  startDate: parsedRange[0],
                  calendarDate,
                };
              }
              return null;
            });
          }}