I'm using the headers function to get the headers in a react server component in the app directory,
and this is the code for it

// app > success > page.tsx
import { headers } from 'next/headers';

export const dynamic = 'force-dynamic';

export default async function SuccessPage() {
  const headerList = headers();

  console.log(headerList.get('id'));
  return <></>;
}

I'm sending this url localhost:3000/success?id=whatever, and I'm getting the value as null, can anyone help me why is that happening.