Ionic React试图实现一个过滤搜索栏，以根据标题过滤预先制作的列表

import React, { useState } from 'react';
import { IonList, IonItem, IonInput } from '@ionic/react';

const FilteredList = ({ items }) => {
  const [filterKeyword, setFilterKeyword] = useState('');

  const filteredItems = items.filter(item =>
    item.title.toLowerCase().includes(filterKeyword.toLowerCase())
  );

  const handleFilterChange = event => {
    setFilterKeyword(event.target.value);
  };

  return (
    <div>
      <IonInput
        placeholder="输入关键字"
        value={filterKeyword}
        onIonChange={handleFilterChange}
      ></IonInput>
      <IonList>
        {filteredItems.map(item => (
          <IonItem key={item.id}>{item.title}</IonItem>
        ))}
      </IonList>
    </div>
  );
};

export default FilteredList;