I get this error with any player that I try to initiate within the useEffect :

NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. 

my nextjs 14 client component :

"use client";


import 'plyr/dist/plyr.css';
import Plyr from 'plyr';
import { useEffect, useRef } from 'react';




const VideoPlayer = () => {
    const videoRef = useRef(null);
    

    useEffect(() => {
        if (videoRef.current) {
            const player = new Plyr(videoRef.current);


            // return () => {
            //     player.destroy();
            // }; 
        }

        

    }, [])
    

    return (
        <>
            <video ref={videoRef} className="plyr" controls>
                <source src={"/test.mp4"} type="video/mp4" />
            </video>
        </>
    );
}   

export default VideoPlayer;

The issue happens when I click on the next Link tag when I’m on the same page as the player, I even tried to add a return statement to the useEffect but it doesn’t work because it rendered two times, I stopped the reactStrictMode inside the next js config but nothing happens, it only gets solved when I replace the Link tag with regular a tag

My App Structure:

<MyServerComponent>
  <MyPlayerInClientComponent>
  <Link src={"/"} /> <--- The error happens when I click on the link tag while being on the same page as the player
</MyServerComponent>