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

export function getAcadYearStartDate(acadYear: string): Date {
  const shortYear = acadYear.split('/')[0];
  const targetYear = 2000 + parseInt(shortYear, 10);
  const firstDateOfMonth = new Date(targetYear, 7, 1, 0, 0, 0);
  const nearestMonday = startOfWeek(firstDateOfMonth, { weekStartsOn: 1 });

  if (isBefore(nearestMonday, firstDateOfMonth)) {
    const firstMonday = addWeeks(nearestMonday, 1);
    return firstMonday;
  }
  // 1st Aug is already a Monday
  return nearestMonday;
}

fireRangeSelect() {
    // Make sure the start date is before the end date
    if (dateFns.isBefore(this.selected, this.selected2)) {
      this.onSelect.next({
        startDate: {
          month: this.labels.formatDateWithFormat(this.selected, { month: 'long' }),
          year: this.selected.getFullYear(),
          day: this.labels.formatDateWithFormat(this.selected, { weekday: 'long' }),
          date: this.selected,
        },
        endDate: {
          month: this.labels.formatDateWithFormat(this.selected2, { month: 'long' }),
          year: this.selected2.getFullYear(),
          day: this.labels.formatDateWithFormat(this.selected2, { weekday: 'long' }),
          date: this.selected2,
        },
      });
    }
  }

const selectValue = [selectedStartDate, selectedEndDate];
      const disabled = disabledDate?.(thisDate, selectValue, TYPE.CALENDAR);
      const isToday = isSameDay(thisDate, new Date());
      const unSameMonth = !inSameMonth?.(thisDate);
      const isStartSelected =
        !unSameMonth && selectedStartDate && isSameDay(thisDate, selectedStartDate);
      const isEndSelected = !unSameMonth && selectedEndDate && isSameDay(thisDate, selectedEndDate);
      const isSelected = isStartSelected || isEndSelected;

      let inRange = false;
      // for Selected
      if (selectedStartDate && selectedEndDate) {
        if (isBefore(thisDate, selectedEndDate) && isAfter(thisDate, selectedStartDate)) {
          inRange = true;
        }
        if (isBefore(thisDate, selectedStartDate) && isAfter(thisDate, selectedEndDate)) {
          inRange = true;
        }
      }

      // for Hovering
      if (!isSelected && hoverEndDate && hoverStartDate) {
        if (!isAfter(thisDate, hoverEndDate) && !isBefore(thisDate, hoverStartDate)) {
          inRange = true;
        }
        if (!isAfter(thisDate, hoverStartDate) && !isBefore(thisDate, hoverEndDate)) {
          inRange = true;
        }
      }

      const classes = classNames(this.addPrefix('cell'), {
        [this.addPrefix('cell-un-same-month')]: unSameMonth,

updateCounts = () => {
    const { data, loadUser } = this.props;
    const hour = get(data, [0, 'hour'], null);

    if (hour == null) return;

    const twentyFourHour = parseInt(hour, 10) + (/pm/gi.test(hour) ? 12 : 0);
    const fullDate = setHours(Date.now(), twentyFourHour);
    const hourTickedOver = isBefore(startOfHour(fullDate), Date.now());

    if (hourTickedOver && window.navigator.onLine) {
      loadUser();
    }
  };

_select(date = undefined) {
		this.snapshot();
		date = type.isDate(date) ? date : new Date(date);
		if (this.options.isRange && (!this._isValidDate(this.start) || (this._isValidDate(this.start) && this._isValidDate(this.end)))) {
			this.start = date;
			this.end = undefined;
			this.emit('select:start', this);
		} else if (this.options.isRange && !this._isValidDate(this.end)) {
			if (dateFns.isBefore(date, this.start)) {
				this.end = this.start;
				this.start = date;
				this.emit('select', this);
			} else if (dateFns.isAfter(date, this.start)) {
				this.end = date;
				this.emit('select', this);
			} else if (this.options.allowSameDayRange) {
				this.end = date;
				this.emit('select', this);
			} else {
				this.start = date;
				this.end = undefined;
				this.emit('select:start', this);
			}
		} else {
			this.start = date;

renderPreviewPlaceholder() {
    const { preview, day, styles } = this.props;
    if (!preview) return null;
    const startDate = preview.startDate ? endOfDay(preview.startDate) : null;
    const endDate = preview.endDate ? startOfDay(preview.endDate) : null;
    const isInRange =
      (!startDate || isAfter(day, startDate)) && (!endDate || isBefore(day, endDate));
    const isStartEdge = !isInRange && isSameDay(day, startDate);
    const isEndEdge = !isInRange && isSameDay(day, endDate);
    return (
      <span style="{{">
    );
  }
  renderSelectionPlaceholders() {</span>

  (lastLoad, isLoading, halfAMinuteAgo) => !isLoading && isBefore(lastLoad, halfAMinuteAgo)
);

protected weekChanged(week) {
    if (
      isWithinInterval(week, { start: this.minDate, end: this.maxDate }) ||
      isWithinInterval(endOfWeek(week), { start: this.minDate, end: this.maxDate })
    ) {
      this.start = isBefore(week, this.minDate) ? this.minDate : week;
      this.end = isAfter(endOfWeek(week), this.maxDate) ? this.maxDate : endOfWeek(week);
      this.startVm.currentMonth = startOfMonth(this.start);
      this.endVm.currentMonth = startOfMonth(this.end);
    }
  }

const isProvider = await User.findOne({
      where: { id: provider_id, provider: true },
    });

    if (!isProvider) {
      return res
        .status(401)
        .json({ error: 'You can only create appointmnets with providers' });
    }

    /**
     * Check for past dates
     */
    const hourStart = startOfHour(parseISO(date));

    if (isBefore(hourStart, new Date())) {
      return res.status(400).json({ error: 'Past dates are not permitted' });
    }

    /**
     * Check date availability
     */
    const checkAvailability = await Appointment.findOne({
      where: {
        provider_id,
        canceled_at: null,
        date: hourStart,
      },
    });

    if (checkAvailability) {
      return res

isPast(date: Date): boolean {
    return this._value && isBefore(date, this._value);
  }