How to render a YouTube video upon button click in React?

I am new to React and am trying to build a video player page. Currently I have a super basic page in mind — I'd like to have one button that, when clicked, renders a YouTube video.

I've followed a resource that uses the npm react-player package so that I can just embed a Youtube Player as follows:

function YouTubePlayer () {  return (<div><ReactPlayer        url="https://www.youtube.com/watch?v=ug50zmP9I7s"      /></div>  )}export default YouTubePlayer

However, instead of having the video display on the page as soon as it loads, I want it to only load when the button is clicked. I created a button and an event handler like this:

import { Component } from 'react';import ReactPlayer from 'react-player';class YouTubePlayer extends Component {    constructor(props) {        super(props);    }    handleYouTubeClick = () => {        return (<div><ReactPlayer url="https://youtu.be/OXHCt8Ym9gw"/></div>        );    }    render() {        return ( <div><p>Video Player</p><button onClick={this.handleYouTubeClick}>YouTube</button></div>        );    }export default YouTubePlayer

but no video gets rendered. Do I have to do something with states? I do not know how I would go about doing so. Again, I am very new to React, so please let me know if I am approaching this completely wrong. Thanks.