I’m using React DayPicker with date-fns-jalali to create a Jalali (Persian) calendar component. However, I’m encountering an issue where the calendar is not displaying correctly. Instead of starting from the 1st day of each month, it’s starting from the 11th.
Here’s my current implementation:

import * as React from "react";
import { DayPicker, DayPickerDefaultProps } from "react-day-picker";
import { faIR } from "date-fns/locale";
import { format, getMonth, getYear, startOfMonth } from "date-fns-jalali";

function Calendar({ ...props }: CalendarProps) {
  const jalaliMonths: string[] = [
    "فروردین", "اردیبهشت", "خرداد", "تیر", "مرداد", "شهریور",
    "مهر", "آبان", "آذر", "دی", "بهمن", "اسفند"
  ];

  const jalaliFormatters: DayPickerDefaultProps["formatters"] = {
    formatWeekdayName: (date: Date) => format(date, "EEEEEE", { locale: faIR }),
    formatCaption: (date: Date) => {
      const month = getMonth(date);
      const year = getYear(date);
      return `${jalaliMonths[month]} ${year}`;
    },
    formatDay: (date: Date) => format(date, "d", { locale: faIR }),
  };

  const today = new Date();
  const firstOfMonth = startOfMonth(today);

  return (
    <DayPicker
      fromDate={firstOfMonth}
      dir={"rtl"}
      formatters={jalaliFormatters}
      locale={faIR}
      {...props}
    />
  );
}