如何在reactjs和动态数据渲染中过滤日期范围

import React, { useState } from "react";

const data = [
  { id: 1, name: "Item 1", date: "2022-01-01" },
  { id: 2, name: "Item 2", date: "2022-02-01" },
  { id: 3, name: "Item 3", date: "2022-03-01" },
  // 其他数据项...
];

const App = () => {
  const [startDate, setStartDate] = useState(""); // 开始日期
  const [endDate, setEndDate] = useState(""); // 结束日期

  const handleFilter = () => {
    // 根据日期范围过滤数据
    const filteredData = data.filter((item) => {
      return item.date >= startDate && item.date <= endDate;
    });

    // 根据过滤后的数据生成展示元素
    const renderedData = filteredData.map((item) => {
      return <div key={item.id}>{item.name}</div>;
    });

    return renderedData;
  };

  return (
    <div>
      <input
        type="date"
        value={startDate}
        onChange={(e) => setStartDate(e.target.value)}
      />
      <input
        type="date"
        value={endDate}
        onChange={(e) => setEndDate(e.target.value)}
      />
      <button onClick={handleFilter}>过滤</button>

      {/* 展示过滤后的数据 */}
      {handleFilter()}
    </div>
  );
};

export default App;