[9.8.0] : While using DayButton to customize day cell, i can't get dateRange in "range" mode

[dgnguyen]

Hello, i have a problem while customize component DayButton in "range" mode. Here's my DayButton component :

const customDayButton = (props: { day: CalendarDay; modifiers: Modifiers }) => {
      const { date } = props.day

      const day = new Date(date).getDate()
      const dateStr = createDateString(date)
      const matchCount = matchCounts[dateStr]
      const isLoading = Object.keys(matchCounts).length === 0
      let isSelected = false
      if (
        calendarSelected &&
        typeof calendarSelected === "object" &&
        "from" in calendarSelected &&
        "to" in calendarSelected
      ) {
        if (calendarSelected.from && calendarSelected.to) {
          isSelected = date >= calendarSelected.from && date <= calendarSelected.to
        } else if (calendarSelected.from) {
          isSelected = date.toDateString() === calendarSelected.from.toDateString()
        }
      } else if (selectedDate instanceof Date) {
        isSelected = date.toDateString() === selectedDate.toDateString()
      }

      const isSunday = date.getDay() === 0
      const isTodayDate = isToday(date)

      if (!sportType) {
        const dayTextColor = isSelected ? "text-primary-foreground" : isSunday ? "text-primary" : "text-foreground"
        const hoverText = "group-hover:text-accent-foreground"
        const hoverBg = "group hover:bg-accent"
        return (
          <div
            className={`w-full h-16 rounded-sm relative flex items-center justify-center cursor-pointer ${hoverBg}`}
            onClick={() => {
              if (date) {
                onSelectDate(date)
              }
            }}
          >
            {isTodayDate && !hideToday && (
              <span
                className={`absolute top-1 left-1 text-[14px] ${isSelected ? "text-primary-foreground" : dayTextColor} ${hoverText}`}
              >
                {t("today")}
              </span>
            )}
            <span className={`text-[18px] font-medium ${dayTextColor} ${hoverText}`}>{day}</span>
          </div>
        )
      }

I realized that when using "range" mode in react-day-picker, the onSelect props is ignored. As a result, it doesn't detect the selected date range. Has anyone else experienced this issue?