React-calendar Ui not switching when value is set from function after single interaction

Question

The UI of the react calendar is not switching to the respective month when the value is set functionally after the calendar has been touched (dirty).

export default function App() {
  const [date, setDate] = useState([
    new Date('2022-05-10'),
    new Date('2022-05-15'),
  ]);
  return (
    <>
      <p>
        <div>
          <button onClick={() => setDate([new Date('2022-11-02'), new Date('2022-11-08')])}>click</button>
          <Calendar
            value={date}
            onChange={(v) => {
              setDate(v);
            }}
            selectRange
            minDate={new Date()}
            defaultStartDate={date[0]}
          />
        </div>
      </p>
)
}

If the button is clicked post a manual selection of dates has been made. (calendar component clicked and selection made). Then the date value changes but the UI stays intact.