How to control audio/video DOM element in React

In a project using React, the aim is to control the HTML5 audio/video element using non-native controls.

I am unsure how to do this as the typical way of manipulating elements (as per my understanding) is via Props which would only be useful if we wish to re-render the element.

My problem is similar to the following:

class Audio extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <audio controls>
                <source src="audio.mp3" type="audio/mp3" />
            </audio>
        );
    }
}

class AudioControls extends React.Component {
    constructor(props) {
        super(props);

        this.handlePlayClick = this.handlePlayClick.bind(this);
        this.handlePauseClick = this.handlePauseClick.bind(this);
        this.handleSeekClick = this.handleSeekClick.bind(this);
    }

    handlePlayClick(event) {
        this.props.onPlayClick();
        event.preventDefault();
    }

    handlePauseClick(event) {
        this.props.onPauseClick();
        event.preventDefault();
    }

    handleSeekClick(event) {
        this.onSeekClick();
        event.preventDefault();
    }

    render() {
        <div>
            <button onClick={this.handlePlayClick}>Play</button>
            <button onClick={this.handlePauseClick}>Pause</button>
            <button onClick={this.handleSeekClick}>Seek to 10 Seconds</button>
        </div>
    }
}

class App extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <Audio />
                <p>Control the audio with the buttons below</p>
                <AudioControls onPlayClick="" onPauseClick="" onSeekClick="" />
            </div>
        );
    }
}

We would normally control playback using HTMLMediaElement.pause(), HTMLMediaElement.play(), HTMLMediaElement.currentTime, etc.

Any help or assistance that can be provided is appreciated.