I am not able to destroy embedded youtube video on plyr player. player.destroy() method is called without any error but it does not destroy the player.

For this reason when I try to open another embedded video, it just loads the previous embedded video.

When I checked isEmbed property of the player it returns false. It should be true as I am playing youtube video.

I am using react js.

let video = document.getElementById('player-embed');

var youtubeEmbedId = extractYoutubeEmbedId(options.source.src)
window.player = new Plyr(video, defaultOptions);

useEffect(() => {

    return () => {
        window.player.destroy();
        if (window.hls) {
            window.destroyHLS();
        }
    }
}, [])

return (
    <div id="player-embed" data-plyr-provider="youtube" data-plyr-embed-id={youtubeEmbedId}/>
);

I found this codepen example for plyr youtube video example and it is working as expected. isEmbed property returns true and player.destroy() method indeed destroy the player. Don't know why it's not working for me.