在React钩子的对象数组中使用onChange更新useState中的日期(datepicker)

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

const MyComponent = () => {
  const [data, setData] = useState([
    { id: 1, date: new Date() },
    { id: 2, date: new Date() },
    // ...
  ]);
  const [selectedDate, setSelectedDate] = useState(null);

  const handleDateChange = (date, id) => {
    const updatedData = data.map(item => {
      if (item.id === id) {
        return { ...item, date };
      }
      return item;
    });
    setData(updatedData);
  };

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>
          <DatePicker
            selected={item.date}
            onChange={date => handleDateChange(date, item.id)}
          />
        </div>
      ))}
    </div>
  );
};

export default MyComponent;