How do you create a concurrent search using useTransition + useDeferredValue?

function ConcurrentSearch({ products }) {
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();
  const deferredQuery = useDeferredValue(query);
  
  const results = useMemo(() => 
    products.filter(p => p.name.includes(deferredQuery)), 
    [products, deferredQuery]
  );
  
  return (
    <div>
      <input 
        onChange={e => startTransition(() => setQuery(e.target.value))} 
        placeholder="Search products..."
      />
      {isPending ? 'Searching...' : <ProductList products={results} />}
    </div>
  );
}