如何使用过滤器根据我使用React Js在我的datepicker上选择的日期返回所有值

import React, { useState } from 'react';

function DatePicker() {
  const [selectedDate, setSelectedDate] = useState(null);

  // 其他组件代码...

  return (
    <div>
      {/* 日期选择器的代码 */}
    </div>
  );
}

export default DatePicker;

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

function DatePickerComponent() {
  const [selectedDate, setSelectedDate] = useState(null);

  const handleDateChange = (date) => {
    setSelectedDate(date);
  };

  return (
    <div>
      <DatePicker selected={selectedDate} onChange={handleDateChange} />
    </div>
  );
}

export default DatePickerComponent;

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

function DatePickerComponent() {
  const [selectedDate, setSelectedDate] = useState(null);
  const [data, setData] = useState([
    // 假设这是你的数据
    { id: 1, date: '2022-01-01', value: 'Value 1' },
    { id: 2, date: '2022-01-02', value: 'Value 2' },
    { id: 3, date: '2022-01-03', value: 'Value 3' },
    // 其他数据...
  ]);

  const handleDateChange = (date) => {
    setSelectedDate(date);
  };

  const filteredData = data.filter((item) => {
    return item.date === selectedDate?.toISOString().split('T')[0];
  });

  return (
    <div>
      <DatePicker selected={selectedDate} onChange={handleDateChange} />
      <ul>
        {filteredData.map((item) => (
          <li key={item.id}>{item.value}</li>
        ))}
      </ul>
    </div>
  );
}

export default DatePickerComponent;