Having a bug with CldVideoPlayer in Next.js website

I am using CldVideoPlayer to playback video for my users. I have a component where I rendered the CldVideoPlayer and import to use anywhere I wanted to use it.
The error that I am getting is this:

Multiple instances of the same video detected on the
 page which may cause some features to not work.
Try adding a unique id to each player.

Here are my codes:

import "next-cloudinary/dist/cld-video-player.css";
import { CldVideoPlayer } from "next-cloudinary";

export function CloudinaryVideoPlayer(props: mediaPlayerAttributes) {
const { playerId, publicMediaId, width, height } = props;

 return (
 <div className={`w-full flex justify-center  flex-col `}>
  <div className={``}>
    <CldVideoPlayer
      id={playerId as string}
      src={publicMediaId}
      height={height}
      className=" rounded-lg outline-none"
    />
  </div>
  </div>
 );
}

This is where I used it so far:

export const SingleCourseView = ()=>{
 const httpReqeust = fetchAPI;

 return (
  <CloudinaryVideoPlayer
    publicMediaId={httpReqeust?.courseVideoPublicURL}
    playerId={httpReqeust?._id as string}
   />
  )  

}

Funny enough, I only have one video to view on this page. Yet it keeps saying multiple instance of the same video. Seems the Video component is rendering multiple times.
The id is unique.
I have also noticed that this error does not happen when you refresh the page. It happens when you navigate to the page from another page. If the navigation would lead to reload of the page, the error will not appear. So, it is a bug. I don’t know if there is a way around it. For now, I am using Next.js Link component and set target to blank to force reload of the page. But I would like a normal navigation to that page.