Pause video when changing slide in React JS Carousel reusable component?

I have a reusable Bootstrap carousel component that renders different videos and is working well, but there is one issue when the video is playing and the slide is changed to the next one or the previous one the video doesn't pause but it continues to play. I want to pause it when changing the slides, but I can't really figure out how to achieve this in React JS. I will attach below my carousel component code, maybe it helps.

PS. If there is something else that I should add here pls let me know. Many thanks in advance :)

import React, { Component } from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import Carousel from 'react-bootstrap/Carousel';
import "../carousel.css";

export default class VideoCarousel extends Component {
  constructor(props) {
    super(props);
  }

  render(){
    return(
      <div>
      <Carousel interval={null}  className="carousel">
          {this.props.items.map((item, index) => {
              return (
                  <Carousel.Item key={index}>
                  <video className="videoItem" controls="controls">
                        <source src={item.src} type="video/mp4"/>
                    </video>
                  <Carousel.Caption>
                    {/* <h2>{item.title}</h2> */}
                  </Carousel.Caption>
                  </Carousel.Item>
              );
          })}
      </Carousel>
      </div>
    )
  }
}