Sometimes, we need to extend the functionality of our React components by interacting with the DOM directly. Take, for example, a video player component that includes a video element. We might want to control the playback of this video with play and pause buttons, as well as display its current state. React doesn't provide a built-in method for this. To achieve this functionality, we need to obtain a reference to the underlying video element and then use the play or pause methods on that reference.

Instead of using document.querySelector to select a DOM element, React offers a convenient hook named useRef, which we can import from React. If we want to reference any DOM element, like an h1 tag, we can do so by first calling useRef to create a reference variable. We then utilize the ref prop in the JSX element to pass down our reference. After this setup, we can access the DOM element itself via the current property of the reference, which acts as a pointer to the actual element. By accessing ref.current, we can interact with the h1 element directly, as seen when we inspect the console.

Your challenge is to utilize useRef for the video element. Implement functionality for the play and pause buttons using the play and pause methods. Additionally, display the video's current state, indicating whether it is playing or paused. You can achieve this with a couple of custom event handlers: onPlay and onPause, which will provide information about the video's playback status.