React and VideoJS - onClick Event #5356

import React from 'react';
import VideoPlayer from '../Player/VideoPlayer'
const VideoDetail = ({video}) => {
    //Check if video object is valid
    if(!video) {
        return <div>Loading...</div>
    return (
        <div className="video-detail col-md-8">
            <




    
div className="details">
                <div className="video-app-title">{video.title}</div>
                <div>{video.description}</div>
            </div>
                <VideoPlayer {...{
                        autoPlay: true,
                        controls: true,
                        poster: video.poster,
                        fileName : video.fileName,
                        sources: [{
                            src: video.source,
            </div>
        </div>
export default VideoDetail;
VideoJS is constructed as shown below
    import React, { Component } from 'react';  //React module is imported.
export default class VideoPlayer extends Component {
    componentDidMount() {    
      this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
        document.getElementById('vjs_video_3_html5_api').onclick = function() {
          console.log('clicked');
      });
    reportAndPlay() {
      console.log('called');
    componentWillUnmount() {
      if (this.player) {
        this.player.dispose();
    render() {  
      return (
        <video
          className="video-js vjs-default-skin vjs-big-play-centered"
          height="360"
          ref={(c) => { this.videoNode = c; }}
          width="640" />
It is not working as expected. Click event triggers only after a click.