如何在react中过滤状态数组？

import React, { useState } from 'react';

function App() {
  const [data, setData] = useState([
    { id: 1, name: 'Apple' },
    { id: 2, name: 'Banana' },
    { id: 3, name: 'Orange' },
    { id: 4, name: 'Grapes' }
  ]);
  const [keyword, setKeyword] = useState('');

  const handleFilter = (searchKeyword) => {
    const filteredData = data.filter(item =>
      item.name.toLowerCase().includes(searchKeyword.toLowerCase())
    );
    setData(filteredData);
    setKeyword(searchKeyword);
  };

  return (
    <div>
      <input
        type="text"
        value={keyword}
        onChange={e => handleFilter(e.target.value)}
        placeholder="Search by name"
      />
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;