disabling left and right Chevron for previous and next month

[PROMEDIK-INDONESIA]

Hi everyone, I’m trying to disable and hide the right chevron after clicking the next icon and reaching 2 months from today.
I'm using the code below — even when I add the disabled prop to the <Chevron /> component, the right chevron is still clickable and the navigation still works.
Has anyone else experienced the same issue?

Thankyou guys

const renderCalendar = () => {
    const date = availableDate.map((item: string) => {
      const [year, month, day] = item.split("-").map(Number);
      return new Date(year, month - 1, day);
    })

    const handleMonthChange = (newMonth: Date) => {
      // Prevent going beyond maxDate
      const rightLimit = new Date(month.getFullYear(), month.getMonth() + 1, 1);
      if (newMonth > rightLimit && rightLimit >= maxDate) {
        return;
      }
      // Prevent going before today
      if (newMonth < today) {
        return;
      }
      setMonth(newMonth);
    };

    const maxDate = new Date(today.getFullYear(), today.getMonth() + 2, 1); // 2 months from now

    const CustomChevron = (props: ChevronProps) => {
      const isRight = props.orientation === "right";
      const isLeft = props.orientation === "left";

      // rightmost visible month
      const rightMonth = new Date(month.getFullYear(), month.getMonth() + 1, 1);

      const shouldDisableRight = isRight && rightMonth >= maxDate;
      const shouldDisableLeft = isLeft && month <= today;

      if (shouldDisableRight || shouldDisableLeft) {
        return (
          <span
            aria-hidden="true"
            className="opacity-20 pointer-events-none w-6 h-6 inline-block"
          />
        );
      }

      return <Chevron {...props} />;
    };


    return (
      <DayPicker
        modifiers={{
          marked: date
        }}
        modifiersClassNames={{
          marked: 'my-marked-class'
        }}
        animate
        fixedWeeks
        onMonthChange={handleMonthChange}
        numberOfMonths={width !== null && width > 768 ? 2 : 1}
        defaultMonth={today}
        components={{
          Chevron(props) {
            return (
              <CustomChevron disabled {...props} />
            )
          },
        }}
      />
    )

[rodgobbi]

@PROMEDIK-INDONESIA
Could you create a code sandbox based on this template to reproduce the issue?

[PROMEDIK-INDONESIA]

https://codesandbox.io/p/devbox/daypicker-bug-report-forked-9ddr6h

[PROMEDIK-INDONESIA]

Nevermind, it was solved after I took a look and messed around in the playground. Thankyou Rod!