I am trying to figure out if its possible to pass all of the params of my z.object through the dynamic route but I receive this error when trying to access a param. There is no error inside VS Code only during run time. below is the code from the overview page that links to the dynamic page and the dynamic page code itself.

Overview:

async function fetchCourses(): Promise<Course[]> {
  const file = await fs.readFile(
    process.cwd() + "/public/courses.json",
    "utf-8",
  );

  const courses: Course[] = Course.array().parse(JSON.parse(file));
  return courses;
}

export default async function CoursesOverview() {
  const courses: Course[] = await fetchCourses();
  return (
    <main className="grid min-h-screen grid-cols-5 grid-rows-5 items-center justify-center bg-white ">
      <div className="row-center-2 col-start-3">
        <ul>
          {courses.map((course) => (
            <li key={course.id}>
              <Link
                href={{
                  pathname: `/courses/${course.id}`,
                  query: { course: course.name },
                }}
                legacyBehavior
                passHref
              >
                <a>{course.name}</a>
              </Link>
            </li>
          ))}
        </ul>
      </div>
      <Button className="row-center-3 col-start-3">
        <Link href="/courses/course-reviews">Click me to go to reviews</Link>
      </Button>
    </main>
  );
}

Dynamic page:

export default function CoursesOverview({
  params,
}: {
  params: { courseReview: Course };
}) {
  const courseName = params.courseReview.name;
  return (
    <main className="grid min-h-screen grid-cols-5 grid-rows-5 items-center justify-center bg-white ">
      <div className="row-center-2 col-start-3">
        Course Review Work in progress
      </div>
      <Card>
        <CardHeader></CardHeader>
      </Card>
      <Button className="row-center-3 col-start-3">{courseName}</Button>
    </main>
  );
}