Passing query parameter to props of custom component in NextJS

Question

I'm currently making a profile page wherein the route /profile/displaynamehere will display a page where one of its components is a basic information page that shows the display name of the user.

The component is called BasicInfo and accepts props called displayName. Here's how it looks like:

export default function Profile() {
  const router = useRouter();
  const displayNameQuery = router.query.displayName;

  return (
     ...
     <BasicInfo displayName={displayNameQuery} />
     ...
  )
}

The problem is, displayName or {displayNameQuery} in this context is undefined whenever I try to console.log it. Is there a way wherein I can pass the query parameter as props to my component?