how to fix automatic next click in antd date time range picker?

Question

I am using Ant Design to create date time range picker when I select datetime for first time, it works correctly but when I try to change datetime, month start changing continuously.

I was able to create same behaviors here.

This is my code

const App = () => {
  const [start, setStart] = useState("");
  const [end, setEnd] = useState("");

  const handleRange = (datetimeRangeUTC, datetimeRangeLocal) => {
    setStart(datetimeRangeLocal[0]);
    setEnd(datetimeRangeLocal[1]);
    console.log(datetimeRangeLocal[0]);
    console.log(datetimeRangeLocal[1]);
  };

  return (
    <div>
      <Space direction="vertical" size={12}>
        <RangePicker
          showTime={{ format: "HH:mm" }}
          format="YYYY-MM-DD HH:mm"
          value={[start ? moment(start) : "", end ? moment(end) : ""]}
          onChange={handleRange}
          placeholder={["YYYY-MM-DD HH:mm", "YYYY-MM-DD HH:mm"]}
        />
      </Space>
    </div>
  );
};

Please help.

Answer 1

import React, { useState } from "react";
import "./index.css";
import moment from "moment";
import { DatePicker, Space } from "antd";
const { RangePicker } = DatePicker;

const App = () => {
  const [start, setStart] = useState("");
  const [end, setEnd] = useState("");

  const handleRange = (datetimeRangeUTC, datetimeRangeLocal) => {
    setStart(datetimeRangeUTC[0]);// important
    setEnd(datetimeRangeUTC[1]);// important
    console.log(datetimeRangeUTC[0]);
    console.log(datetimeRangeUTC[1]);
  };

  return (
    <div>
      <Space direction="vertical" size={12}>
        <RangePicker
          showTime={{ format: "HH:mm" }}
          format="YYYY-MM-DD HH:mm"
          value={[start, end]}// important
          onChange={handleRange}
          placeholder={["YYYY-MM-DD HH:mm", "YYYY-MM-DD HH:mm"]}
        />
      </Space>
    </div>
  );
};
export default App;