React: Why isn't the YouTube player state rendering?

I'm currently working on a personal project to embed a YouTube video and render the current state of the video player on the page using a YouTube API call to getPlayerState(). Here's the code I have right now, and my logic was that I could update playerState depending on what the getPlayerState function returns.

Here's the API function: https://developers.google.com/youtube/iframe_api_reference#Playback_status.

However, the playerState that comes up on the page never updates. It just always stays at Unstarted, which is what I initialized to, even after the video starts playing.

Would someone mind explaining what error I might be encountering, and a possible fix? I've looked at this for a long time and can't quite figure out why this is. Thank you so much!

import React from 'react';
import ReactPlayer from "react-player"

class VideoPlayer extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            playerState: "Unstarted",
            youtubeIsClicked: false,
        };
    }

    handleVideoPlayerState = (e) => {
        this.currentVideoPlayerState(e);
    }

    currentVideoPlayerState = async (e) => {
        let [currentPlayerState] = await Promise.all([
            e.target.getPlayerState()
        ]);

        switch (currentPlayerState) {
            case -1:
                console.log('onPlayerStateChange', currentPlayerState);
                this.setState({ playerState: "Unstarted" })
                break;
            case 0:
                console.log('onPlayerStateChange', currentPlayerState);
                this.setState({ playerState: "Ended" })
                break;
            case 1:
                console.log('onPlayerStateChange', currentPlayerState);
                this.setState({ playerState: "Playing" })
                break;
            case 2:
                console.log('onPlayerStateChange', currentPlayerState);
                this.setState({ playerState: "Paused" })
                break;
            case 3:
                console.log('onPlayerStateChange', currentPlayerState);
                this.setState({ playerState: "Buffering" })
                break;
            case 5:
                console.log('onPlayerStateChange', currentPlayerState);
                this.setState({ playerState: "Video cued" })
                break;
        }
    }

    handleYouTubeClick = () => {
        this.setState({
            youtubeIsClicked: true,
        });
    }

    render() {
        return (
            <div style={{ width: "80%", margin: "0 auto" }}>
                <h1>Video Player</h1>
                <button onClick={this.handleYouTubeClick}>Youtube</button>
                {this.state.youtubeIsClicked && (
                    <div>
                        <ReactPlayer
                            url="https://youtu.be/2XsP4I9ds4c"
                            playerState={this.state.playerState}
                            onPlayerStateChange={this.handleVideoPlayerState}
                        />
                        <p>Playback State: {this.state.playerState}</p>
                    </div>
                )}
            </div>
        );
    }
}

export default YouTubePlayer