How to play in React without external library?

I have a video tag in my webpage and a "play/pause" button that when the user clicks on it, the video should start/stop playing. Unfortunately, this solution doesn't work (how to play/pause video in React without external library?). Is there any chance that there is a conflict with the react-slick carousel(https://react-slick.neostack.com/)?

Here is my code:

import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

class VideoCarousel extends Component {

    playVideo() {
        this.refs.vidRef.play();
    }

    componentRender(data) {
        const settings = {
            dots: true,
            ...
        };

        return (
          <div id="video-carousel">
            <div>
               <Slider {...settings}>
                  {data.map((item, index) => (
                      <div key={index}>
                         <div className="video">
                            <div className="w-100 h-100">
                               <video className="video-carousel-card-video" ref="vidRef">
                                  <source src={item.video_file} type="video/mp4" />
                               </video>
                               <button className="card-video-button" onClick={this.playVideo.bind(this)}>
                               </button>
                            </div>
                          </div>
                        </div>
                   ))}
               </Slider>
             </div>
          </div >
        )
    }
}

export default VideoCarousel;