如何通过带有两个组件的搜索进行过滤[reactjs]

import React, { useState } from 'react';

const SearchFilter = ({ data }) => {
  const [searchTerm1, setSearchTerm1] = useState('');
  const [searchTerm2, setSearchTerm2] = useState('');

  const handleSearch1 = (event) => {
    setSearchTerm1(event.target.value);
  };

  const handleSearch2 = (event) => {
    setSearchTerm2(event.target.value);
  };

  const filteredData = data.filter((item) => {
    return (
      item.field1.toLowerCase().includes(searchTerm1.toLowerCase()) &&
      item.field2.toLowerCase().includes(searchTerm2.toLowerCase())
    );
  });

  return (
    <div>
      <input
        type="text"
        placeholder="Search by Field 1"
        value={searchTerm1}
        onChange={handleSearch1}
      />
      <input
        type="text"
        placeholder="Search by Field 2"
        value={searchTerm2}
        onChange={handleSearch2}
      />
      <ul>
        {filteredData.map((item) => (
          <li key={item.id}>
            {item.field1} - {item.field2}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default SearchFilter;

import { debounce } from 'lodash';

const handleSearch1 = debounce((event) => {
  setSearchTerm1(event.target.value);
}, 300);

const handleSearch2 = debounce((event) => {
  setSearchTerm2(event.target.value);
}, 300);