ReactJS - видеопоток с веб-камеры не работает

Я не уверен, почему это не работает. Я получаю поток с камеры, и он работает, потому что я получаю свет от своей камеры.

Поток просто не прикрепляется.

class VideoOutput extends React.Component {
    constructor(props) {
        super(props);
        this.videoRef = React.createRef();
    }

    componentDidMount() {
        const videoObj = this.videoRef.current;
        videoObj.srcObject = this.props.video;
        console.info(videoObj);
    }

    render() {
        return <video ref = {this.videoRef}></video>;
    }
}


class Application extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      video: null
    };

    this.handleVideoClick = this.handleVideoClick.bind(this);
  }


  async getVideo() {
    const video = await navigator.mediaDevices.getUserMedia({
      audio: false,
      video: true
    });
    this.setState({ video });
  }

  stopVideo() {
    this.state.video.getTracks().forEach(track => track.stop());
    this.setState({ video: null });
  }


  handleVideoClick() {
    if (this.state.video) {
      this.stopVideo();
    } else {
      this.getVideo();
    } 
  }

  render(){
    return(
      <div>
          <button onClick = {this.handleVideoClick}>
            {this.state.video ? 'Vid On' : 'Vid Off'}
          </button>
      <div>
      {this.state.video ? <VideoOutput video = {this.state.video} /> : ''}
       </div>
       </div>
    );
  }


}

ReactDOM.render(<Application />, document.getElementById('root'));

Неработающий пример здесь: https://codepen.io/Чензо/пен/QXXVvr

Мне кажется, что должен работает... но я подозреваю, что упускаю что-то простое.