Date Range Calendar viewport moves

[vmali-gh]

Description
If you select a period of, say, two months using the calendar, then close and reopen the calendar, the same viewport—the entire period—will be displayed in both calendars. The same applies if you move the period using the calendar. Only if you change the date using the input field will the viewport of the endDate calendar shift. The viewport of the startDate calendar remains the same.

Steps to reproduce the behavior:
<DatePicker
selected={selectedDate}
onChange={(date: Date | null) => setStartDate(date)}
selectsStart
startDate={selectedDate}
endDate={endDate}
monthsShown={2}
/>
<DatePicker
selected={endDate}
onChange={(date: Date | null) => setEndDate(date)}
selectsEnd
startDate={selectedDate}
endDate={endDate}
minDate={selectedDate}
monthsShown={2}
/>
</>

1. Select a two-month period via the calendar.
2. Close the calendar and open the calendar again => the viewport remains the same in both calendars.
3. Move the start and end dates by one day each via the calendar
4. Close and reopen the calendar => the viewport remains the same in both calendars.
5. Move the start and end dates by one day each via the input field
6. Close and reopen the calendar => the start date viewport remains the same, the end date viewport has shifted.

Expected behavior
The viewport remains the same in both calendars

Screenshots
initialization:

Step 1-2:

Step 3-4:

Step 5-6:

Desktop:

• OS: [iOS]
• Browser [Chrome]
• Version [140.0.7339.215]