If an API returns 5000 records, how do you display them efficiently in a dropdown?

import { useVirtualizer } from "@tanstack/react-virtual";

function Combo({ all }: { all: Item[] }) {
  const [q, setQ] = useState("");
  const debounced = useDebounce(q, 200);
  const filtered = useMemo(
    () => debounced ? all.filter((i) => i.name.toLowerCase().includes(debounced.toLowerCase())) : all,
    [all, debounced],
  );

  const parentRef = useRef<HTMLDivElement>(null);
  const v = useVirtualizer({
    count: filtered.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 32,
    overscan: 8,
  });

  return (
    <>
      <input value={q} onChange={(e) => setQ(e.target.value)} aria-autocomplete="list" />
      <div ref={parentRef} role="listbox" style={{ height: 320, overflow: "auto" }}>
        <div style={{ height: v.getTotalSize(), position: "relative" }}>
          {v.getVirtualItems().map((row) => (
            <div
              key={row.key}
              role="option"
              style={{
                position: "absolute", top: 0, left: 0, right: 0,
                transform: `translateY(${row.start}px)`,
                height: row.size,
              }}
            >
              {filtered[row.index].name}
            </div>
          ))}
        </div>
      </div>
    </>
  );
}