'use client';

Here is my code, if i remove lines 5/13/22 it all works fine, as soon as I add them per chapter 11 in the learning docs it breaks and gives me an uncaught error message in the console, not sure why, i'm very new to this stuff

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

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

function handleSearch(term: string) {
const handleSearch = useDebouncedCallback((term) => {
console.log(Searching... ${term});
const params = new URLSearchParams(searchParams);
if (term) {
params.set('query', term);
} else {
params.delete('query');
}
replace(${pathname}?${params.toString()});
}, 300);
}

return (
<div className="relative flex flex-1 flex-shrink-0">
<label htmlFor="search" className="sr-only">
Search
</label>
<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" />
</div>
);
}