当react中的搜索数据为空时，表中的搜索不起作用

import React, { useState } from "react";

const Table = () => {
  const [searchKeyword, setSearchKeyword] = useState("");
  const [tableData, setTableData] = useState([
    { id: 1, name: "John Doe" },
    { id: 2, name: "Jane Smith" },
    { id: 3, name: "Alice Johnson" },
  ]);

  const handleSearch = (e) => {
    setSearchKeyword(e.target.value);
  };

  const filteredData = tableData.filter((item) =>
    item.name.toLowerCase().includes(searchKeyword.toLowerCase())
  );

  return (
    <div>
      <input type="text" value={searchKeyword} onChange={handleSearch} />
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
          </tr>
        </thead>
        <tbody>
          {searchKeyword === "" ? (
            tableData.map((item) => (
              <tr key={item.id}>
                <td>{item.id}</td>
                <td>{item.name}</td>
              </tr>
            ))
          ) : filteredData.length === 0 ? (
            <tr>
              <td colSpan={2}>No results found</td>
            </tr>
          ) : (
            filteredData.map((item) => (
              <tr key={item.id}>
                <td>{item.id}</td>
                <td>{item.name}</td>
              </tr>
            ))
          )}
        </tbody>
      </table>
    </div>
  );
};

export default Table;