How to use the date-fns.addMonths function in date-fns

function getMonths(props) {
    var _a = props.month, month = _a === void 0 ? new Date() : _a, numberOfMonths = props.numberOfMonths, toMonth = props.toMonth, fromMonth = props.fromMonth, reverseMonths = props.reverseMonths;
    var start = dateFns.startOfMonth(month);
    var end = dateFns.startOfMonth(dateFns.addMonths(start, numberOfMonths));
    var monthsDiff = dateFns.differenceInMonths(end, start);
    var months = [];
    for (var i = 0; i < monthsDiff; i++) {
        var month_1 = dateFns.addMonths(start, i);
        if (toMonth && month_1 > dateFns.startOfMonth(toMonth)) {
            // Skip months after toMonth
            continue;
        }
        if (fromMonth && month_1 < dateFns.startOfMonth(fromMonth)) {
            // Skip months before fromMonth
            continue;
        }
        months.push(month_1);
    }
    if (reverseMonths) {
        months = months.reverse();
    }
    return months;
}

function getMonths(props) {
    var _a = props.month, month = _a === void 0 ? new Date() : _a, numberOfMonths = props.numberOfMonths, toMonth = props.toMonth, fromMonth = props.fromMonth, reverseMonths = props.reverseMonths;
    var start = startOfMonth(month);
    var end = startOfMonth(addMonths(start, numberOfMonths));
    var monthsDiff = differenceInMonths(end, start);
    var months = [];
    for (var i = 0; i < monthsDiff; i++) {
        var month_1 = addMonths(start, i);
        if (toMonth && month_1 > startOfMonth(toMonth)) {
            // Skip months after toMonth
            continue;
        }
        if (fromMonth && month_1 < startOfMonth(fromMonth)) {
            // Skip months before fromMonth
            continue;
        }
        months.push(month_1);
    }
    if (reverseMonths) {
        months = months.reverse();
    }
    return months;
}

onNextDatePicker(e) {
		if (!this._supportsPassive) {
			e.preventDefault();
		}
		e.stopPropagation();

		const nextMonth = dateFns.addMonths(this._visibleDate, 1);
		const day = Math.min(dateFns.getDaysInMonth(nextMonth), dateFns.getDate(this._visibleDate));
		this._visibleDate = this.max ? dateFns.min(dateFns.setDate(nextMonth, day), this.max) : dateFns.setDate(nextMonth, day);

		this.refresh();
	}

.add('Initial visible month', () => (
    
  ))
  .add('Minimum booking days (7 days)', () => (

function handleMonth(what, value) {
  const match = DATE_PATTERN.month_year.exec(value);

  const month = parseInt(match[1]);
  const year = parseInt(match[2]);

  const min = addMonths(new Date(year, 0, 1), month - 1);
  const max = endOfMonth(addMonths(new Date(year, 0, 1), month - 1));

  return { min, max };
}

var buildHeaderConfig = function (month, view, config) {
    if (view === CALENDAR_VIEWS.DAYS) {
        return {
            firstDisabled: isBeforeMin(month, startOfYear(config.minDate), -12),
            lastDisabled: isAfterMax(month, endOfYear(config.maxDate), 12),
            prevDisabled: isBeforeMin(month, startOfMonth(config.minDate), -1),
            nextDisabled: isAfterMax(month, endOfMonth(config.maxDate), 1),
            firstTooltip: format(addMonths(month, -12), "MMM yyyy"),
            lastTooltip: format(addMonths(month, 12), "MMM yyyy"),
            prevTooltip: format(addMonths(month, -1), "MMM yyyy"),
            nextTooltip: format(addMonths(month, 1), "MMM yyyy")
        };
    }
    if (view === CALENDAR_VIEWS.MONTHS) {
        return {
            prevDisabled: isBeforeMin(month, startOfYear(config.minDate), -12),
            nextDisabled: isAfterMax(month, endOfYear(config.maxDate), 12),
            prevTooltip: format(addYears(month, -1), "yyyy"),
            nextTooltip: format(addYears(month, 1), "yyyy")
        };
    }
    if (view === CALENDAR_VIEWS.YEARS) {
        var start = startOfDecade(month);
        var end = endOfDecade(month);

export const isAfterMax = (month: Date, maxDate: Date, n: number = 0) => {
  return isValid(maxDate) ? isAfter(addMonths(startOfDay(month), n), startOfDay(maxDate)) : false;
};

isSameDay,
  differenceInCalendarDays,
} from 'date-fns';

const defineds = {
  startOfWeek: startOfWeek(new Date()),
  endOfWeek: endOfWeek(new Date()),
  startOfLastWeek: startOfWeek(addDays(new Date(), -7)),
  endOfLastWeek: endOfWeek(addDays(new Date(), -7)),
  startOfToday: startOfDay(new Date()),
  endOfToday: endOfDay(new Date()),
  startOfYesterday: startOfDay(addDays(new Date(), -1)),
  endOfYesterday: endOfDay(addDays(new Date(), -1)),
  startOfMonth: startOfMonth(new Date()),
  endOfMonth: endOfMonth(new Date()),
  startOfLastMonth: startOfMonth(addMonths(new Date(), -1)),
  endOfLastMonth: endOfMonth(addMonths(new Date(), -1)),
};

const staticRangeHandler = {
  range: {},
  isSelected(range) {
    const definedRange = this.range();
    return (
      isSameDay(range.startDate, definedRange.startDate) &&
      isSameDay(range.endDate, definedRange.endDate)
    );
  },
};

export function createStaticRanges(ranges) {
  return ranges.map(range => ({ ...staticRangeHandler, ...range }));

var buildHeaderConfig = function (month, view, config) {
    if (view === CALENDAR_VIEWS.DAYS) {
        return {
            firstDisabled: isBeforeMin(month, startOfYear(config.minDate), -12),
            lastDisabled: isAfterMax(month, endOfYear(config.maxDate), 12),
            prevDisabled: isBeforeMin(month, startOfMonth(config.minDate), -1),
            nextDisabled: isAfterMax(month, endOfMonth(config.maxDate), 1),
            firstTooltip: format(addMonths(month, -12), "MMM yyyy"),
            lastTooltip: format(addMonths(month, 12), "MMM yyyy"),
            prevTooltip: format(addMonths(month, -1), "MMM yyyy"),
            nextTooltip: format(addMonths(month, 1), "MMM yyyy")
        };
    }
    if (view === CALENDAR_VIEWS.MONTHS) {
        return {
            prevDisabled: isBeforeMin(month, startOfYear(config.minDate), -12),
            nextDisabled: isAfterMax(month, endOfYear(config.maxDate), 12),
            prevTooltip: format(addYears(month, -1), "yyyy"),
            nextTooltip: format(addYears(month, 1), "yyyy")
        };
    }
    if (view === CALENDAR_VIEWS.YEARS) {
        var start = startOfDecade(month);
        var end = endOfDecade(month);
        return {
            prevDisabled: isBeforeMin(month, startOfDecade(config.minDate), -120),
            nextDisabled: isAfterMax(month, endOfDecade(config.maxDate), 120),

var changeMonth = function (month, view, grain) {
    if (view === CALENDAR_VIEWS.DAYS) {
        switch (grain) {
            case CALENDAR_NAVIGATION.FIRST:
                return dateFns.addMonths(month, -12);
            case CALENDAR_NAVIGATION.LAST:
                return dateFns.addMonths(month, 12);
            case CALENDAR_NAVIGATION.PREV:
                return dateFns.addMonths(month, -1);
            case CALENDAR_NAVIGATION.NEXT:
                return dateFns.addMonths(month, 1);
        }
    }
    if (view === CALENDAR_VIEWS.MONTHS) {
        switch (grain) {
            case CALENDAR_NAVIGATION.PREV:
                return dateFns.addYears(month, -1);
            case CALENDAR_NAVIGATION.NEXT:
                return dateFns.addYears(month, 1);
        }
    }
    if (view === CALENDAR_VIEWS.YEARS) {
        switch (grain) {
            case CALENDAR_NAVIGATION.PREV:
                return dateFns.addYears(month, -10);
            case CALENDAR_NAVIGATION.NEXT:
                return dateFns.addYears(month, 10);