Update single state object from more than one React Date Picker input

Question

Trying to update state object data from two React Date Pickers embedded in bigger contolled form but can't do this. Any ideas what am I missing? Thank you in advance.

Live preview here: https://codesandbox.io/s/autumn-https-nyr28?file=/src/App.js

export default function App() {
  const [data, setData] = useState({
    async: true,
    from: "",
    to: ""
  });

  const handleChange = event => {
    let target = event.target;
    let value = target.type === "checkbox" ? target.checked : target.value;
    let name = target.name;
    setData(previousSearchData => ({
      ...previousSearchData,
      [name]: value
    }));
  };

  const handleSubmit = event => {
    event.preventDefault();
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit}>
      Checkbox:{" "}
      <input
        name="async"
        type="checkbox"
        checked={data.checkbox}
        onChange={handleChange}
      />
      <br />
      From:{" "}
      <ReactDatePicker
        name="from"
        selected={data.from}
        onChange={handleChange}
        timeInputLabel="Start time:"
        dateFormat="yyyy/MM/dd h:mm aa"
        showTimeInput
      />
      To:{" "}
      <ReactDatePicker
        name="to"
        selected={data.to}
        onChange={handleChange}
        timeInputLabel="End time:"
        dateFormat="yyyy/MM/dd h:mm aa"
        showTimeInput
      />
      <input type="submit" value="submit" />
    </form>
  );
}

Answer 1

This plugin does not send a js event object after it gets its input changed, it sends a js Date object, as you can see in the oficial page:

<DatePicker selected={startDate} onChange={date => setStartDate(date)} />

You will need to create a handler function specifically for inputs of this kind.

Something like:

<DatePicker selected={startDate} onChange={date => handleDatePickerChange('startDate', date)} />

...

const handleDatePickerChange = (name, date) => {
    setData(previousSearchData => ({
      ...previousSearchData,
      [name]: date
    }));
};