Hi. It's my first time using app router as NextJs directory. My project was initialized using pages directory and I recently converted it to app directory.

My directory looks like this:
app/
├── eligibility-checker/
│ ├── [scholarship-id]
│ | |--- page.tsx
│ ├── page.tsx
|--- types/
| |--- index.ts
|--- data/
| |--- scholarships.ts

When I select an item from /list/ it works properly and redirects to list/1 (/list/[item-id]/page.tsx) and the correct id=1. My problem is that when I'm trying to retrieve the query param id=1 on the /[item-id] component, it's saying it is undefined and I'm not sure what I'm missing.

//app/eligibility-checker/
import Link from 'next/link';
import { scholarships } from '../data/scholarships';
import { Scholarship } from '../types';

export default function EligibilityChecker() {
  return (
    <div className="space-y-4">
      {scholarships.map((scholarship: Scholarship) => (
        <div
          key={scholarship.id}
        >
          <div className="card-actions justify-center mb-4">
            <Link
              href={`/eligibility-checker/${scholarship.id}`} 
              className="btn btn-primary text-white"
            >
              Check Eligibility
            </Link>
          </div>
        </div>
      ))}
    </div>
  );
}

//app/eligibility-checker/[scholarship-id]
'use client'; //<-- only added this to see console.log result
import Link from 'next/link';
import { scholarships } from '@/app/data/scholarships';

export default function ScholarshipAbout({
  params,
}: {
  params: { scholarshipId: string };
}) {
  const scholarship = scholarships.find(
    (scholar) => scholar.id === Number(params.scholarshipId),
  );
  console.log(params.scholarshipId); //<--- **This is always undefined even when the route on the url is correct

  return <h1>Scholarship ID: {params.scholarshipId}</h1>;
}