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

export const ScopeDays = (props: ScopeDaysProps) => {
  const { tasks, date } = props;

  const days = groupBy(tasks, t => formatDate(parseDate(t.date.split(' ')[0])));

  const start = startOfMonth(date);
  let end = endOfMonth(date);

  const now = new Date();

  if (end > now) {
    end = now;
  }

  if (end > start) {
    // Ensure that days before the current day are given a scope, even with no tasks
    eachDayOfInterval({ start, end }).forEach(day => {
      const key = formatDate(day);

      if (!days[key]) days[key] = [];
    });
  }

export function getMonths(props: DayPickerProps): Date[] {
  const {
    month = new Date(),
    numberOfMonths,
    toMonth,
    fromMonth,
    reverseMonths
  } = props;

  const start = startOfMonth(month);
  const end = startOfMonth(addMonths(start, numberOfMonths));
  const monthsDiff = differenceInMonths(end, start);

  let months = [];
  for (let i = 0; i < monthsDiff; i++) {
    const month = addMonths(start, i);
    if (toMonth && month > startOfMonth(toMonth)) {
      // Skip months after toMonth
      continue;
    }
    if (fromMonth && month < startOfMonth(fromMonth)) {
      // Skip months before fromMonth
      continue;
    }
    months.push(month);
  }

private _getFirstCellDate(): Date {
    if (isSunday(lastDayOfMonth(subMonths(this._date, 1)))) {
      return startOfMonth(this._date)
    }

    return addDays(startOfWeek(lastDayOfMonth(subMonths(this._date, 1))), 1)
  }

startDate: startOfWeek(date),
		endDate: endOfWeek(date)
	},
	{
		label: "Last Week",
		startDate: startOfWeek(addWeeks(date, -1)),
		endDate: endOfWeek(addWeeks(date, -1))
	},
	{
		label: "Last 7 Days",
		startDate: addWeeks(date, -1),
		endDate: date
	},
	{
		label: "This Month",
		startDate: startOfMonth(date),
		endDate: endOfMonth(date)
	},
	{
		label: "Last Month",
		startDate: startOfMonth(addMonths(date, -1)),
		endDate: endOfMonth(addMonths(date, -1))
	}
];

protected dateChanged() {
    this.selectedDate = parseRange(this.date);
    if (this.selectedDate) {
      this.startMonth = startOfMonth(this.selectedDate[0]);
      this.endMonth = startOfMonth(this.selectedDate[1]);

      const preset = this.datePresets.find(p => p.preset === this.date);
      this.dateLabel = preset
        ? preset.label
        : `${UIFormat.date(this.selectedDate[0], this.format)} ~ ${UIFormat.date(
          this.selectedDate[1],
          this.format
        )}`;
    }
  }

const getChartData = (
  accountsCol,
  transactionsCol,
  filteredTransactions,
  filteredAccounts,
  currentMonth
) => {
  const now = new Date()
  const cur = currentMonth ? new Date(currentMonth) : now

  let start = subDays(startOfMonth(cur), 1)
  let end = endOfMonth(cur)
  if (isAfter(end, now)) {
    end = now
    start = subMonths(end, 1)
  }

  const isLoading =
    (isCollectionLoading(transactionsCol) && !hasBeenLoaded(transactionsCol)) ||
    (isCollectionLoading(accountsCol) && !hasBeenLoaded(accountsCol))

  if (isLoading) {
    return null
  }

  const history = getBalanceHistory(
    filteredAccounts,

function UIRangePicker() {
        this.format = "dd MMM yyyy";
        this.datePresets = [];
        this.startMonth = startOfMonth(new Date());
        this.endMonth = startOfMonth(addMonths(new Date(), 1));
        this.startPage = CALENDAR_VIEWS.DAYS;
        this.endPage = CALENDAR_VIEWS.DAYS;
        this.VIEWS = CALENDAR_VIEWS;
    }
    UIRangePicker.prototype.bind = function () {

private _getWeekOfMonth(date: Date): number {
    return getISOWeek(date) - getISOWeek(startOfMonth(this.date))
  }

export function getNavigation(props: DayPickerProps): NavigationMonths {
  const { fromMonth, toMonth, month, numberOfMonths, pagedNavigation } = props;

  const add = pagedNavigation ? numberOfMonths : 1;
  const currentMonth = startOfMonth(month || new Date());

  let prevMonth: Date | undefined;
  if (!fromMonth || currentMonth > startOfMonth(fromMonth)) {
    prevMonth = addMonths(currentMonth, add * -1);
  }

  let nextMonth: Date | undefined;
  if (
    !toMonth ||
    addMonths(currentMonth, numberOfMonths) <= startOfMonth(toMonth)
  ) {
    nextMonth = addMonths(currentMonth, add);
  }

  return { nextMonth, prevMonth };
}

function UIRangePicker() {
        this.format = "dd MMM yyyy";
        this.datePresets = [];
        this.startMonth = startOfMonth(new Date());
        this.endMonth = startOfMonth(addMonths(new Date(), 1));
        this.startPage = CALENDAR_VIEWS.DAYS;
        this.endPage = CALENDAR_VIEWS.DAYS;
        this.VIEWS = CALENDAR_VIEWS;
    }
    UIRangePicker.prototype.bind = function () {