When I try to call the useParams() hook in nextjs, it’s null when it should not, according to the documentation.

this is my directory structure:

pages
├── [gameCode]
│   └── index.tsx

inside index.tsx, while visiting http://localhost:3001/ca850a(example game code):

'use client'

import { useParams } from 'next/navigation';

const GameIndex = () => {

   const params = useParams();
   const gameCode = params.gameCode; // error here
   console.log(gameCode);

return(<div></div>)
}


export default GameIndex;

i get an error that params is null.

I tried multiple methods, but no one worked.