React Query에서 데이터를 필터링하고 검색하는 방법은 무엇입니까?

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <UserList />
    </QueryClientProvider>
  );
}

function UserList() {
  const { data } = useQuery("users", fetchUsers);

  return (
    <div>
      {data.map((user) => (
        <UserCard key={user.id} user={user} />
      ))}
    </div>
  );
}

function UserFilter() {
  const [filter, setFilter] = useState("");

  const { data } = useQuery(
    ["filteredUsers", filter],
    () => fetchFilteredUsers(filter),
    {
      enabled: Boolean(filter),
    }
  );

  return (
    <div>
      <input
        type="text"
        value={filter}
        onChange={(e) => setFilter(e.target.value)}
      />
      {data && data.length > 0 ? (
        <div>
          {data.map((user) => (
            <UserCard key={user.id} user={user} />
          ))}
        </div>
      ) : (
        <div>No matching users</div>
      )}
    </div>
  );
}