Using RQ with MultipleSelector component in Async

export default function MultiselectItems() {
  const { selectedItems, selectedItemQuantities, onSelectedItemsChange, onItemQuantityChange } = useJacketEditorContext()
  const [searchValue, setSearchValue] = useState('')

  const { data: items = [] } = useQuery({
    queryKey: ['itemsBySearchValue', searchValue],
    queryFn: ({ queryKey }) => {
      return itemService.getFinishedGoodItems(queryKey[1])
    },
  })

  const itemOptions = useMemo(
    () =>
      items.map((item) => ({
        value: String(item.id),
        label: `${item.sku} - ${item.name}`,
        disable: false,
        key: String(item.id),
      })),
    [items],
  )

  return (
    <>
      {/* Multi-select with tags */}
      <div>
        <MultiSelect
          options={itemOptions}
          onSearchSync={(value) => {
            setSearchValue(value)
            return itemOptions
          }}
          selectFirstItem={false}
          onChange={(opts) => {
            onSelectedItemsChange(opts)
          }}
          placeholder="Search for an item..."
          loadingIndicator={
            <p className="py-2 text-center text-lg leading-10 text-muted-foreground">loading...</p>
          }
          emptyIndicator={
            <p className="w-full text-center text-lg leading-10 text-muted-foreground">no results found.</p>
          }
        />
      </div>
   // ... (snip) ...
   )

export default function MultiselectItems() {
  const { selectedItems, selectedItemQuantities, onSelectedItemsChange, onItemQuantityChange } = useJacketEditorContext()
  const [searchValue, setSearchValue] = useState('')

  const { data: items = [] } = useQuery({
    queryKey: ['itemsBySearchValue', searchValue],
    queryFn: ({ queryKey }) => {
      return itemService.getFinishedGoodItems(queryKey[1])
    },
  })

  const itemOptions = useMemo(
    () =>
      items.map((item) => ({
        value: String(item.id),
        label: `${item.sku} - ${item.name}`,
        disable: false,
        key: String(item.id),
      })),
    [items],
  )

  return (
    <>
      {/* Multi-select with tags */}
      <div>
        <MultiSelect
          options={itemOptions}
          onSearchSync={(value) => {
            setSearchValue(value)
            return itemOptions
          }}
          selectFirstItem={false}
          onChange={(opts) => {
            onSelectedItemsChange(opts)
          }}
          placeholder="Search for an item..."
          loadingIndicator={
            <p className="py-2 text-center text-lg leading-10 text-muted-foreground">loading...</p>
          }
          emptyIndicator={
            <p className="w-full text-center text-lg leading-10 text-muted-foreground">no results found.</p>
          }
        />
      </div>
   // ... (snip) ...
   )