Just wrapping the component using useSearchParams() inside of a boundary and it will fix

'use client';

import { Suspense } from 'react';
import { useSearchParams } from 'next/navigation';

function MyComponent() {
const [searchParams] = useSearchParams();
// your logic here
return <div>{searchParams.get('q')}</div>;
}

export default function Page() {
return (
<Suspense fallback={<div>Loading...</div>}>
<MyComponent />
</Suspense>
);
}

Read more mistakes here: Common useSearchParams() Mistakes in Next.js & How to Fix Them.