我创建了一个简单的搜索项目页面
1.加载时，用户将看到其类别下的所有项目。
1.用户将能够搜索项目。
1.如果找到，将显示项目，否则将显示“无项目”。
然而，我仍然认为下面的代码没有优化，可以缩短，因为我可以看到每个类别Map的不情愿代码。
我很感激知道我应该如何使用一个过滤器和一个Map的SECTION TO OPTIMIZE下面。谢谢。
编码：https://codesandbox.io/s/beautiful-brahmagupta-79i9ih?file=/src/App.js

import React, { useEffect, useState } from "react";
import "./index.css";

const object = [
  { category: "One", name: "Mishanta" },
  { category: "One", name: "Virichia" },
  { category: "Two", name: "Steven" },
  { category: "Two", name: "Vikhostana" },
  { category: "Three", name: "Rockhosita" },
  { category: "Three", name: "Johnsonow" },
  { category: "Three", name: "Urvesta" },
  { category: "Two", name: "Dipuota" },
  { category: "One", name: "Dikhosta" }
];
const App = () => {
  const [searchedInput, setSearchedInput] = useState("");
  const [searchedItem, setSearchedItem] = useState([]);
  const [items, setItems] = useState([]);

  useEffect(() => {
    setItems(object);
  }, []);

  useEffect(() => {
    if (searchedInput !== "") {
      const arr = JSON.parse(JSON.stringify(object));
      const filteredData = arr.filter((value) => {
        const searchStr = searchedInput.replace(/\s/g, "").toLowerCase();
        const nameMatches = value.name.toLowerCase().includes(searchStr);
        return nameMatches;
      });
      setSearchedItem(filteredData);
    }
  }, [searchedInput]);

  return (
    <>
      <input type="text" onChange={(e) => setSearchedInput(e.target.value)} />

      {searchedInput.length > 0 ? (
        searchedItem.length == 0 ? (
          <h4>No item found. Sorry bro..</h4>
        ) : (
          searchedItem.map((x, i) => (
            <>
              <h4>Category: {x.category}</h4>
              <span key={i} className="selected-styles">
                {x.name}
              </span>
            </>
          ))
        )
      ) : (
        <>
          // SECTION TO OPTIMIZE
          <h4>Category: One</h4>
          {items
            .filter((item) => item.category === "One")
            .map((x, i) => (
              <span key={i} className="styles">
                {x.name}
              </span>
            ))}

          <hr />

          <h4>Category: Two</h4>
          {items
            .filter((item) => item.category === "Two")
            .map((x, i) => (
              <span key={i} className="styles">
                {x.name}
              </span>
            ))}

          <hr />

          <h4>Category: Three</h4>
          {items
            .filter((item) => item.category === "Three")
            .map((x, i) => (
              <span key={i} className="styles">
                {x.name}
              </span>
            ))}
        </>
      )}
    </>
  );
};

export default App;