Refactor AsyncSearch component for better key management

lightrag_webui/src/components/ui/AsyncSearch.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 import { Loader2 } from 'lucide-react'
 import { useDebounce } from '@/hooks/useDebounce'
 
@@ -204,7 +204,7 @@ export function AsyncSearch<T>({
             ))}
           <CommandGroup>
             {options.map((option, idx) => (
-              <>
+              <React.Fragment key={getOptionValue(option) + `-fragment-${idx}`}>
                 <CommandItem
                   key={getOptionValue(option) + `${idx}`}
                   value={getOptionValue(option)}
@@ -215,9 +215,9 @@ export function AsyncSearch<T>({
                   {renderOption(option)}
                 </CommandItem>
                 {idx !== options.length - 1 && (
-                  <div key={idx} className="bg-foreground/10 h-[1px]" />
+                  <div key={`divider-${idx}`} className="bg-foreground/10 h-[1px]" />
                 )}
-              </>
+              </React.Fragment>
             ))}
           </CommandGroup>
         </CommandList>