Month jumping on date selection using react-date-range

Question

I'm using DateRangePicker from react-date-range in a next.js project.

You can see the expected behavior on their demo page: if you select any date from the month on the right, the months stay in place. Here's a video.

But in my project, the month from the right jumps to the left on date selection (as you can see it in this video).
I've made a simple demo here by copying code from their demo page:

import { addDays } from "date-fns";
import { useState } from "react";
import { DateRangePicker } from "react-date-range";
import "react-date-range/dist/styles.css"; // main style file
import "react-date-range/dist/theme/default.css"; // theme css file

export default function IndexPage() {
  const [state, setState] = useState([
    {
      startDate: new Date(),
      endDate: addDays(new Date(), 7),
      key: "selection"
    }
  ]);

  return (
    <div>
      <h1>Hello</h1>
      <DateRangePicker
        onChange={(item) => setState([item.selection])}
        showSelectionPreview={true}
        moveRangeOnFirstSelection={false}
        months={2}
        ranges={state}
        direction="horizontal"
      />
    </div>
  );
}

Here you can see the code from my demo page.
Any idea or solution to stop this behavior is welcome! Thank you!

Answer 1

The last version of react-date-range (14.0) add a feature to solve this problem. Just add this prop to your component.

preventSnapRefocus="disabled"

But this could show you an error message on console. The best options for me was just put

preventSnapRefocus 

(yes, puting "disabled" or nothing, the behavior is the same... weird for me)

https://github.com/hypeserver/react-date-range/blob/master/CHANGELOG.md