getting error : the player has already been destroyed.

[smartraysam]

{
"code": 1001,
"name": "API_NOT_AVAILABLE",
"message": "Cannot use the player.isCasting API: the player has already been destroyed."
}

Am alway getting this error. kindly help on way to resolve this>

here is my code

`
import { LogLevel, PlayerAPI, PlayerEvent } from "bitmovin-player";
import { BitmovinPlayer } from "bitmovin-player-react";
import { Fragment, useEffect, useRef, useState } from "react";
import "bitmovin-player/bitmovinplayer-ui.css";

export function ContentPlayer({
id,
autoplay,
media,
height,
poster,
stop,
}: {
id?: string; // Unique ID for each player instance
autoplay?: boolean;
media: string;
height?: number | string;
poster?: string;
stop?: boolean;
}) {
const playerRef = useRef<PlayerAPI | null>(null);
const [isPlaying, setIsPlaying] = useState(stop);
useEffect(() => {
if (stop) {
setIsPlaying(stop);
}
}, [stop]);
return (

<div
id={id}
style={{
position: "relative",
maxWidth: "100%",
height: height || "512px",
minHeight: "512px",
background: "black",
display: "flex",
justifyContent: "center",
flexDirection: "column",
}}
>
<BitmovinPlayer
key={id}
playerRef={(player: PlayerAPI) => {
playerRef.current = player;
if (player) {
if (!isPlaying) {
if (player.isPlaying()) {
player.pause();
}
}
}
player.on(PlayerEvent.Play, () => {});
player.on(PlayerEvent.Paused, () => {});
player.on(PlayerEvent.PlaybackFinished, () => {
player.seek(0);
});
}}
source={{
hls: media,
poster: poster,
}}
config={{
key: process.env.NEXT_PUBLIC_BITMOVIN_KEY!,
playback: {
muted: autoplay ?? false, // Mute if autoplay is enabled
autoplay: autoplay ?? false,
seeking: true,
},
logs: {
level: LogLevel.OFF, // Disable all logs
},
ui: true
}}
/>


);
}

`