如何在react中使用ionSearchbar过滤ionCards？

import { IonSearchbar, IonCard, IonCardContent } from '@ionic/react';
import '@ionic/react/css/core.css';
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

class FilteredCards extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchValue: '',
    };
  }

  handleSearch = (event) => {
    this.setState({ searchValue: event.target.value });
  }

  render() {
    const { searchValue } = this.state;
    const filteredCards = cards.filter(card =>
      card.title.toLowerCase().includes(searchValue.toLowerCase())
    );

    return (
      <div>
        <IonSearchbar value={searchValue} onIonChange={this.handleSearch}></IonSearchbar>
        {filteredCards.map(card => (
          <IonCard key={card.id}>
            <IonCardContent>
              <h2>{card.title}</h2>
              <p>{card.description}</p>
            </IonCardContent>
          </IonCard>
        ))}
      </div>
    );
  }
}

const cards = [
  { id: 1, title: 'Card 1', description: 'This is card 1' },
  { id: 2, title: 'Card 2', description: 'This is card 2' },
  { id: 3, title: 'Card 3', description: 'This is card 3' },
  // 添加更多的卡片数据
];

function App() {
  return (
    <div>
      <FilteredCards />
    </div>
  );
}