I am using the library 'react-dates' DateRangePicker in my React project. I have implemented logic where:

• The start date should be selectable at any time.
• The end date should only be selectable after a start date is chosen.

Issue

• If I click the end date first, it correctly disables all dates (as expected), but when I directly switch to selecting a start date while the end date calendar is open, all start dates appear disabled.
• However, if I initially click the start date, it shows enabled dates as expected). Then, if I switch to the end date, it correctly shows disabled dates, and when I switch back to the start date, it again shows enabled dates. This works fine in this flow (start → end → start), but the reverse flow (end → start) causes the issue.

My DateRangePicker Component:

import { DateRangePicker } from "react-dates";

const MyDateRangePicker = () => {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);
  const [focusedInput, setFocusInput] = useState(null);
  const [visibleMonth, setVisibleMonth] = useState(moment());

  return (
    <DateRangePicker
      startDate={startDate}
      startDateId="startDate"
      endDate={endDate}
      endDateId="endDate"
      numberOfMonths={1}
      minimumNights={0}
      isOutsideRange={(day) => {
        const today = moment().startOf("day");
        if (focusedInput === "startDate") {
          return day.isAfter(today, "day");
        }
        if (focusedInput === "endDate") {
          return !startDate || day.isAfter(moment(), "day");
        }
        return false;
      }}
      onDatesChange={({ startDate, endDate }) => {
        startDate?.set({ hour: 0, minute: 0, second: 0, millisecond: 0 });
        endDate?.set({ hour: 0, minute: 0, second: 0, millisecond: 0 });
        setStartDate(startDate);
        setEndDate(endDate);
        if (startDate !== null && endDate !== null) {
          getAnalytics1(startDate, endDate);
        }
      }}
      focusedInput={focusedInput}
      onFocusChange={(focusedInput) => {
        setFocusInput(focusedInput);
        if (focusedInput === "startDate" && startDate) {
          setVisibleMonth(startDate);
        } else if (focusedInput === "endDate" && endDate) {
          setVisibleMonth(endDate);
        }
      }}
      initialVisibleMonth={() => visibleMonth}
    />
  );
};

Expected Behavior

• When switching from start → end → start, everything works fine.
• When switching from end → start, the start date appears disabled incorrectly.

How can I fix this behavior in react-dates?

Any help would be appreciated!