React Player playerRef.current.playing = false does not stop video from playing

The video still plays in the background (sound) even after the video player has been closed. I tried using pause() but apparently it isn't a function. If I select another thumbnail and bring up another video the current one will stop. I'm thinking of doing that in the background if I cannot get his to work but I prefer my code to be elegant and simple.

import './stylesheets/VideoPlayer.css';
import ExitButton from './ExitButton';
import ReactPlayer from 'react-player';
///-----------
import React, { useRef, useState } from 'react';
///-----------

function VideoPlayer(props) {
    ///-------------
    const [isPlayerVisible, setPlayerVisibility] = useState(false);
    const playerRef = useRef(null); // Create a ref using useRef
    ///-------------

    const handleExit = () => {
        const player = document.getElementById('VideoPlayer') || document.getElementById('VideoPlayer-Active');
        if (player) {
            player.id = player.id === 'VideoPlayer' ? 'VideoPlayer-Active' : 'VideoPlayer';
        } else {
            console.log('error, no video player');
        }


        ///----------------
        if (playerRef.current) {
            // playerRef.current.seekTo(0); // Seek to the beginning
            // playerRef.current.pause();   // Pause the video -- NOT working
            playerRef.current.playing = false;
            // console.log(playerRef.current);
        } else {
            console.log('not current');
        }
        setPlayerVisibility(false);
        ///----------------
    }

    ///---------------
    const handlePlay = () => {
        setPlayerVisibility(true);
    };
    ///---------------

    return (
        <div id="VideoPlayer">
            <ExitButton onExit={handleExit} />
            <ReactPlayer
                ref={playerRef}
                url={props.nowPlaying.videoUrl}
                controls={true}
                width="100%"
                height="100%"
                ///----------------
                onPlay={handlePlay}
                ///----------------
            />
        </div>
    );
}

export default VideoPlayer;

So apparently I just needed to define my own pause function. Thanks for trying, SO

import './stylesheets/VideoPlayer.css';
import ExitButton from './ExitButton';
import ReactPlayer from 'react-player';
///-----------
import React, { useRef, useState } from 'react';
///-----------

function VideoPlayer(props) {
    ///-------------
    const [isPlayerVisible, setPlayerVisibility] = useState(false);
    const [playing, setPlaying] = useState(false);
    const playerRef = useRef(null); // Create a ref using useRef
    const play = () => setPlaying(true)
    const pause = () => setPlaying(false)
    ///-------------

    const handleExit = () => {
        const player = document.getElementById('VideoPlayer') || document.getElementById('VideoPlayer-Active');
        if (player) {
            player.id = player.id === 'VideoPlayer' ? 'VideoPlayer-Active' : 'VideoPlayer';
        } else {
            console.log('error, no video player');
        }


        ///----------------
        if (playerRef.current) {
            // playerRef.current.seekTo(0); // Seek to the beginning
            // playerRef.current.pause();   // Pause the video -- NOT working
            // playerRef.current.playing = false;
            // console.log(playerRef.current);
            pause();
        } else {
            console.log('not current');
        }
        setPlayerVisibility(false);
        ///----------------
    }

    ///---------------
    const handlePlay = () => {
        setPlayerVisibility(true);
    };
    ///---------------

    return (
        <div id="VideoPlayer">
            <ExitButton onExit={handleExit} />
            <ReactPlayer
                ref={playerRef}
                url={props.nowPlaying.videoUrl}
                controls={true}
                width="100%"
                height="100%"
                // playing={false}
                playing={playing}
                onPlay={play}
                onPause={pause}
                // Playing: {playing ? 'true' : 'false'}
                ///----------------
                // onPlay={handlePlay}
                ///----------------
            />
        </div>
    );
}

export default VideoPlayer;