error at : chapter 11 after 2 :update URL with search parameters

[liwenz]

after 2. Update the URL with the search params /app/ui/search.tsx code `'use client';

import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'; import { useSearchParams, usePathname, useRouter } from 'next/navigation';

export default function Search({ placeholder }: { placeholder: string }) { const searchParams = useSearchParams(); function handleSearch(term: string) { const params = new URLSearchParams(searchParams); const pathname = usePathname(); const { replace } = useRouter(); if (term) { params.set('query', term); } else { params.delete('query'); } replace(${pathname}?${params.toString()}); } return ( <div className="relative flex flex-1 flex-shrink-0"> <label htmlFor="search" className="sr-only"> Search <input className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500" placeholder={placeholder} onChange={(e) => { handleSearch(e.target.value); }} /> <MagnifyingGlassIcon className="absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" /> ); }` error:

[liwenz]

from 1 to 2 Search also change.but it does not say.

export default function Search({ placeholder }: { placeholder: string }) { export default function Search() {

[liwenz]

change it to: `'use client';

import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'; import { usePathname, useRouter, useSearchParams } from 'next/navigation';

export default function Search({ placeholder }: { placeholder: string }) { const searchParams = useSearchParams(); const { replace } = useRouter(); const pathname = usePathname();

function handleSearch(term: string) { console.log(Searching... ${term});

const params = new URLSearchParams(searchParams);

params.set('page', '1');

if (term) {
  params.set('query', term);
} else {
  params.delete('query');
}
replace(`${pathname}?${params.toString()}`);

};

return ( <div className="relative flex flex-1 flex-shrink-0"> <label htmlFor="search" className="sr-only"> Search <input className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500" placeholder={placeholder} onChange={(e) => { handleSearch(e.target.value); }} defaultValue={searchParams.get('query')?.toString()} /> <MagnifyingGlassIcon className="absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" /> ); }` fixed, I don't know why

[liwenz]

I put the code const pathname = usePathname(); const { replace } = useRouter(); in function