DayPickerRangeController does not change visible month when startDate or endDate update from state value

[AaronMcCloskey]

react-dates version
react-dates@21.8.0

Describe the bug
In my component, the startDate & endDate props are powered by a select's value in a form. When a new option is selected the startDate & endDate do update as expected and are selected correctly in the range, however, the visible month does not change. I don't necessarily think this is a bug, but I am unsure if there is a way that if the startDate or endDate updates that the visible month jumps to the startDate month?

Source code (including props configuration)
Steps to reproduce the behavior:

When clicking on the Add 2 Months + element, it updates the startDate & endDate state that powers the startDate and endDate props on DayPickerRangeController, however, the visible month does not update in line with these changes.

const Calendar = (props) => {
  const incrementMonths = () => {
    props.onDatesChange({
      startDate:
        (props.startDate && props.startDate.add(2, "months")) ||
        moment(new Date()).add(2, "months"),
      endDate:
        (props.endDate && props.endDate.add(2, "months")) ||
        moment(new Date()).add(3, "months")
    });
  };

  return (
    <>
      <DayPickerRangeController
        startDate={props.startDate}
        endDate={props.endDate}
        numberOfMonths={2}
        noBorder
        onDatesChange={props.onDatesChange}
        onFocusChange={props.onFocusChange}
        initialVisibleMonth={() => props.startDate || moment()}
        focusedInput={props.focusedInput}
        hideKeyboardShortcutsPanel
        firstDayOfWeek={1}
        daySize={44}
        weekDayFormat="dd"
        horizontalMonthPadding={5}
      />
      <div
        style={{
          background: "red",
          padding: "20px",
          color: "white",
          cursor: "pointer"
        }}
        onClick={incrementMonths}
      >
        Add 2 Months +
      </div>
    </>
  );
};

export class AppWrapper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      focusedInput: "startDate"
    };
  }

  onDatesChange = ({ startDate, endDate }) => {
    this.setState({ startDate, endDate });
  };

  onFocusChange = (focusedInput) => {
    this.setState({
      focusedInput: !focusedInput ? "startDate" : focusedInput
    });
  };

  render() {
    return (
      <Calendar
        onDatesChange={this.onDatesChange}
        onFocusChange={this.onFocusChange}
        focusedInput={this.state.focusedInput}
        startDate={this.state.startDate}
        endDate={this.state.endDate}
      />
    );
  }
}

Screenshots/Gifs
https://user-images.githubusercontent.com/20436343/233184001-a85714b8-c2e5-4cb0-a756-4cf13e198ebf.mov

Desktop (please complete the following information):

• OS: MacOS Monterey 12.6
• Browser Chrome
• Version 111.0.5563.146 (Official Build) (x86_64)

Additional context
Any help would be greatly appreciated.

[roildev]

the same issue

[davemjones]

I've got the same issue with the component.

[Rliulinz]

Requires this feature as well, also it will be good if clicks on the date input, the calendar could shuffle to the month which has the start date or end date according to the focused input.

[fcastaneda9725]

Any update here?