Repository: Hacker0x01/react-datepicker (ts)

Issue:
'--in-selecting-range' Class on the End Date is working not as expecte
**Describe the bug**
 `--in-selecting-range` class over the days in the DatePicker is applied wrongly.

**To Reproduce**
```
() => {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);
  return (
    <>
      <DatePicker
        selected={startDate}
        onChange={(date) => setStartDate(date)}
        selectsStart
        startDate={startDate}
        endDate={endDate}
      />
      <DatePicker
        selected={endDate}
        onChange={(date) => setEndDate(date)}
        selectsEnd
        startDate={startDate}
        endDate={endDate}
        minDate={startDate}
      />
    </>
  );
};
```

1. Select the Start Date in the Start Date Picker
2. Select an End Date in the End Date Picker
3. Navigate to the next month in the End Date Picker
4. We can notice `--in-selecting-range` class highlight over all the days till the selected endDate

**Expected behavior**
 `--in-selecting-range` class should be only applied when the endDate is not selected till the pre-selected-date.

**Screenshots**
![Image](https://github.com/user-attachments/assets/cfa7e743-e2c4-4c46-9247-ad4a4e287624)
If you notice in the above screenshot, we can see the  `--in-selecting-range` class is getting applied over the wrong set of dates, eventhough I already selected the endDate.  

Note: This issue is only there in the End Date Picker
Related Issue: https://github.com/Hacker0x01/react-datepicker/issues/5490

Pull request:
Fix #5502: 🐛 Fix '--in-selecting-range' class apply condition for End Date Picker
Closes #5502

## Description
As I mentioned in the linked issue, the 'react-datepicker__day--in-selecting-range' class over the days are getting applied for all the days in the EndDate Picker even if we select the endDate.

**Changes**
- Updated the condition to apply the mentioned class on the other months only if the endDate is not specified

## Contribution checklist
- [x] I have followed the [contributing guidelines](https://github.com/Hacker0x01/react-datepicker/blob/main/CONTRIBUTING.md).
- [x] I have added sufficient test coverage for my changes.
- [x] I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.


Patch:
diff --git a/src/day.tsx b/src/day.tsx
index 1c28426a..49c59ff6 100644
--- a/src/day.tsx
+++ b/src/day.tsx
@@ -312,6 +312,7 @@ export default class Day extends Component<DayProps> {
     if (
       selectsEnd &&
       startDate &&
+      !endDate &&
       (isAfter(selectingDate, startDate) || isEqual(selectingDate, startDate))
     ) {
       return isDayInRange(day, startDate, selectingDate);


Test patch:
diff --git a/src/test/datepicker_test.test.tsx b/src/test/datepicker_test.test.tsx
index eeb3d839..d820374e 100644
--- a/src/test/datepicker_test.test.tsx
+++ b/src/test/datepicker_test.test.tsx
@@ -56,6 +56,14 @@ function goToLastMonth(container: HTMLElement) {
   fireEvent.click(lastMonthButton!);
 }
 
+function goToNextMonth(container: HTMLElement) {
+  const nextMonthButton = safeQuerySelector(
+    container,
+    ".react-datepicker__navigation-icon--next",
+  );
+  fireEvent.click(nextMonthButton!);
+}
+
 function formatDayWithZeros(day: number) {
   const dayString = day.toString();
 
@@ -3109,6 +3117,65 @@ describe("DatePicker", () => {
     });
   });
 
+  describe("is-selecting-range", () => {
+    const IN_RANGE_DAY_CLASS_NAME = "react-datepicker__day--in-selecting-range";
+
+    it("should apply '--in-selecting-range' class to the days till the preselected keyboard date on navigating to the next month without selecting endDate in the endDatePicker", () => {
+      const preselectedDay = 5;
+      const startDate = new Date(`2025/02/${preselectedDay}`);
+
+      const { container } = render(
+        <DatePicker
+          inline
+          selectsEnd
+          startDate={startDate}
+          minDate={startDate}
+        />,
+      );
+
+      goToNextMonth(container);
+
+      for (let i = 1; i <= preselectedDay; i++) {
+        const inSelectionRangeDay = safeQuerySelector(
+          container,
+          `.react-datepicker__day--00${i}`,
+        );
+        expect(
+          inSelectionRangeDay.classList.contains(IN_RANGE_DAY_CLASS_NAME),
+        ).toBe(true);
+      }
+    });
+
+    it("should not apply '--in-selecting-range' class to the days till the date that matched selectedDate in the next months (endDatePicker)", () => {
+      const startDay = 3;
+      const endDay = 8;
+      const startDate = new Date(`2025/02/${startDay}`);
+      const endDate = new Date(`2025/02/${endDay}`);
+
+      const { container } = render(
+        <DatePicker
+          inline
+          selectsEnd
+          startDate={startDate}
+          endDate={endDate}
+          minDate={startDate}
+        />,
+      );
+
+      goToNextMonth(container);
+
+      for (let i = 1; i <= endDay; i++) {
+        const inSelectionRangeDay = safeQuerySelector(
+          container,
+          `.react-datepicker__day--00${i}`,
+        );
+        expect(
+          inSelectionRangeDay.classList.contains(IN_RANGE_DAY_CLASS_NAME),
+        ).toBe(false);
+      }
+    });
+  });
+
   describe("selectsRange without inline", () => {
     it("should have preSelection set to startDate upon opening", () => {
       const startDate = new Date("2021-04-20 00:00:00");
diff --git a/src/test/day_test.test.tsx b/src/test/day_test.test.tsx
index 12d2692a..a17775c0 100644
--- a/src/test/day_test.test.tsx
+++ b/src/test/day_test.test.tsx
@@ -688,15 +688,13 @@ describe("Day", () => {
     });
 
     describe("for an end date picker", () => {
-      it("should highlight for dates after the start date", () => {
-        const { startDate, endDate } = createDateRange(-1, 1);
+      it("should highlight all dates after the start date (if the endDate is not selected yet)", () => {
+        const { startDate } = createDateRange(-1, 1);
 
-        // All these should highlight: today, tomorrow (endDate), the day after
         for (let daysFromStart = 1; daysFromStart <= 3; daysFromStart++) {
           const day = addDays(startDate, daysFromStart);
           const container = renderDay(day, {
             startDate,
-            endDate,
             selectingDate: day,
             selectsEnd: true,
           });