There are several items on the screen already rendered, when I type on the search bar, a new div is created with the items that match the results but I want to narrow down the actual elements that are being displayed. This is my Search.js

function Search() {
  const [searchTerm, setSearchTerm] = useState("");

  return (
    <div className="Search">
      <input
        type="text"
        placeholder="Search"
        onChange={(e) => setSearchTerm(e.target.value)}
      />

      {items
        .filter((val) => {
          if (searchTerm == "") {
            return 0;
          } else if (
            val.name.toLowerCase().includes(searchTerm.toLowerCase())
          ) {
            return val;
          }
        })
        .map((val, key) => {
          return (
            <div className="value" key={key}>
              {val.name}{" "}
            </div>
          );
        })}
    </div>
  );
}

export default Search;

Appreciate any hints