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

		const yearLabels = new Array(100).fill(dateFns.subYears(this._visibleDate, 50)).map((d, i) => dateFns.format(dateFns.addYears(d, i), 'YYYY', {
			locale: this.locale
		}));
		this._ui.body.years.innerHTML = '';

newEnd =
        duration === 'year'
          ? endOfYear(subYears(end, 1))
          : duration === 'week'
          ? endOfWeek(subWeeks(end, 1))
          : endOfMonth(subMonths(end, 1))
    } else {
      newStart =
        duration === 'year'
          ? startOfYear(addYears(start, 1))
          : duration === 'week'
          ? startOfWeek(addWeeks(start, 1))
          : startOfMonth(addMonths(start, 1))
      newEnd =
        duration === 'year'
          ? endOfYear(addYears(end, 1))
          : duration === 'week'
          ? endOfWeek(addWeeks(end, 1))
          : endOfMonth(addMonths(end, 1))
    }
    this.setState({
      statsParams: { duration, end: newEnd, start: newStart, type: 'by_time' },
    })
  }

}
    }
    if (view === CALENDAR_VIEWS.MONTHS) {
        switch (grain) {
            case CALENDAR_NAVIGATION.PREV:
                return addYears(month, -1);
            case CALENDAR_NAVIGATION.NEXT:
                return addYears(month, 1);
        }
    }
    if (view === CALENDAR_VIEWS.YEARS) {
        switch (grain) {
            case CALENDAR_NAVIGATION.PREV:
                return addYears(month, -10);
            case CALENDAR_NAVIGATION.NEXT:
                return addYears(month, 10);
        }
    }
    return month;
};
const buildHeaderConfig = (month, view, config) => {

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);
        }
    }
    return month;
};
var buildHeaderConfig = function (month, view, config) {

constructor(props) {
    super(props);

    this.state = {
      dialogError: null,
      dialogOpen: false,
      quarantineUntilInput:
        props.worker && props.worker.quarantineUntil
          ? parseISO(props.worker.quarantineUntil)
          : addYears(new Date(), 1000),
    };
  }

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),
            prevTooltip: format(addYears(start, -10), "yyyy") + "-" + format(addYears(start, -1), "yyyy"),
            nextTooltip: format(addYears(end, 1), "yyyy") + "-" + format(addYears(end, 10), "yyyy")
        };
    }
};
var isBeforeMin = function (month, minDate, n) {

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

const start = startOfWeek(new Date());
            const end = endOfWeek(new Date());
            const diff = parseInt(date.replace(CALENDAR_GRAIN.WEEK, "") || "0", 10);
            return [addWeeks(start, diff), addWeeks(end, diff)];
        }
        if (date.startsWith(CALENDAR_GRAIN.MONTH)) {
            const start = startOfMonth(new Date());
            const end = endOfMonth(new Date());
            const diff = parseInt(date.replace(CALENDAR_GRAIN.MONTH, "") || "0", 10);
            return [addMonths(start, diff), addMonths(end, diff)];
        }
        if (date.startsWith(CALENDAR_GRAIN.YEAR)) {
            const start = startOfYear(new Date());
            const end = endOfYear(new Date());
            const diff = parseInt(date.replace(CALENDAR_GRAIN.YEAR, "") || "0", 10);
            return [addYears(start, diff), addYears(end, diff)];
        }
    }
    else if (isArray(date)) {
        return [parseISO(date[0]), parseISO(date[1])];
    }
    return null;
};
const getTitle = (month, view) => {

YearsPage.prototype.monthChanged = function (newMonth) {
        this.month = newMonth || new Date();
        this.pageStart = addYears(startOfDecade(this.month), -1);
    };
    YearsPage.prototype.getYear = function (year) {