Server components in Nextjs 13 are not displaying the correct param value passed in the dynamic route (i.e. /user/[id]) doesn’t give correct id passed

I’m using Nextjs 13, I have a client component that routes to /movies/[movieId]. This is the dynamic server component on the [movieId] page:

async function getMovie(id) {
  const movie = await fetch(
    `https://api.themoviedb.org/3/movie/${id}?api_key=${process.env.API_KEY}&language=en-US&append_to_response=videos,people`,
    { cache: "force-cache" }
  );

  return movie.json();
}

const Page = async (props) => {
  // ** ISSUE IS HAPPENING WITH THE props VALUE **

  const movie = await getMovie(props.params.movieId);

  return (
    <div className="container m-auto">{<Movie movie={movie} />}</div>
  );
};

export default Page;

In the code above I show where the error is happening. The problem is, the props property is showing a value of:

{ params: { movieId: ‘%5BmovieId%5D‘ }, searchParams: { movieId: ‘[movieId]’ }}}

The movieId is giving me an encoded value that I’ve tried to decode with decodeURIComponent(). movieId should give me a 6-digit value (i.e. 198409) instead of %5BmovieId%5D.

I’ve tried searching through the beta docs of Nextjs 13 but I’ve found nothing on this.

Does anyone know how to get the actual value dynamic value that is passed in the url?