useSearchParams() causes 500 error when page is client side

In a page.tsx, I have something like this:

'use client';

import { AddForm } from '@/components/AddForm';
import { useSearchParams } from 'next/navigation';

export default function Page() {
  const searchParams = useSearchParams();

  console.log(searchParams);

  return <AddForm />;
}

When the app is built, and I load that page, there will be a request sent to: https://localhost:3000/add?_rsc=3b6ew, which will result in 500, reloading the page.

Why does this happen, and how to prevent it? Maybe in Next.js, pages aren’t supposed to be client side?

Note: I’m using useSearchParams() in that page because I need the query strings for API requests.