Implementing Virtualized Scrolling in NextUI Autocomplete

Question

I am working with NextUI's Autocomplete component and I came across a feature in the documentation that mentions "Support for virtualized scrolling for performance with long lists." However, I am struggling to find a clear way how to make the Autocomplete component use a virtual list instead of normal one.

what I tried

 const [keyword, setKeyword] = useState(props.value);

  const debounced = useDebounce(keyword, 300);
  const filtered = useMemo(
    () =>
      props.options?.filter((d) => d.label.includes(debounced)),
    [debounced],
  );

  return (
    <AppAutoComplete
      fullWidth
      {...props}
      popoverProps={{
        placement: "top",
      }}
      listboxProps={{ isVirtualized: true, dir: "rtl" }}
      items={filtered}
      onInputChange={(change) => {
        setKeyword(change);
      }}
      onSelectionChange={(key) =>
        props.onChange({ target: { value: key as string } })
      }
    >
      {(option: any) => (
        <AutocompleteItem key={option.value}>{option.label}</AutocompleteItem>
      )}
    </AppAutoComplete>