OwlCarousel Dot Functionality Playing Wrong Video On Jquery Click

Question

I've set up a carousel that is full of videos, I've written some JS/JQUERY to autoplay the videos when in view. It currently works as expected when using the navigation arrows. However, when clicking the navigation dots it auto plays the wrong video. It also doesn't autoplay on page load as it should.

Javascript/jQuery

jQuery(document).ready(function ($) {
  $('#video-testimonials').owlCarousel({
    loop: true,
    center: true,
    items: 3,
    margin: 15,
    autoplay: false,
    autowidth: true,
    dots: true,
    nav: true,
    autoplayTimeout: 8500,
    smartSpeed: 450,
    lazyLoad: true,
    addClassActive: true, //important
    touchDrag: false,
    mouseDrag: false,
    navText: [
      "<img src='https://cdn.removedforprivacy.com/wp-content/uploads/2021/12/play-icon-full.png'>",
      "<img src='https://cdn.removedforprivacy.com/wp-content/uploads/2021/12/play-icon-full.png'>",
    ],
    responsive: {
      0: {
        items: 2,
      },
      600: {
        items: 3,
      },
    },
  });

  $('.owl-item.center video').trigger('play');
  $('.owl-item.center video').attr('controls', true);

  $('.owl-nav > div, .owl-dot').click(function () {
    $('.owl-item video').trigger('pause');
    $('.owl-item video').attr('controls', false);
    $('.owl-item.center video').trigger('play');
    $('.owl-item.center video').attr('controls', true);
  });
});

PHP

<div class="col-md-7 col-lg-7 new-hero-video-row">
  <?php if( have_rows('slider_content') ):?>
  <div id="video-testimonials" class="owl-carousel owl-theme">
    <?php while( have_rows('slider_content') ) : the_row();?>
    <div class="testimonial-video-card-wrapper">
      <?php $videoURL = get_sub_field('slider_video');
                  $videoName = get_sub_field('person_name');
                  $videoPosition = get_sub_field('position');

                  if($videoURL):?>
      <video>
        <source src="<?php echo $videoURL;?>" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
      <?php endif;?>

      <?php if($videoName):?>
      <p class="vid-name"><?php echo $videoName;?></p>
      <?php endif;?>

      <?php if($videoPosition):?>
      <p class="vid-position"><?php echo $videoPosition;?></p>
      <?php endif;?>
    </div>
    <?php endwhile;?>
  </div>
  <?php endif;?>
</div>

**Output HTML**

<div id="video-testimonials" class="owl-carousel owl-theme owl-loaded">
  <div class="owl-stage-outer">
    <div
      class="owl-stage"
      style="
        transition: all 0s ease 0s;
        width: 2615px;
        transform: translate3d(-581px, 0px, 0px);
      "
    >
      <div
        class="owl-item cloned active"
        style="width: 275.552px; margin-right: 15px"
      >
        <div class="testimonial-video-card-wrapper">
          <video>
            <source
              src="https://privacy.wpengine.com/wp-content/uploads/2021/12/name-removed.mp4"
              type="video/mp4"
            />
            Your browser does not support the video tag.
          </video>
          <p class="vid-name">NAME REMOVED</p>
          <p class="vid-position">Position</p>
        </div>
      </div>
      <div
        class="owl-item active center"
        style="width: 275.552px; margin-right: 15px"
      >
        <div class="testimonial-video-card-wrapper">
          <video controls="controls">
            <source
              src="https://privacy.wpengine.com/wp-content/uploads/2021/12/name-removed.mp4"
              type="video/mp4"
            />
            Your browser does not support the video tag.
          </video>
          <p class="vid-name">NAME REMOVED</p>
          <p class="vid-position">Position</p>
        </div>
      </div>
      <div class="owl-item active" style="width: 275.552px; margin-right: 15px">
        <div class="testimonial-video-card-wrapper">
          <video>
            <source
              src="https://privacy.wpengine.com/wp-content/uploads/2021/12/name-removed.mp4"
              type="video/mp4"
            />
            Your browser does not support the video tag.
          </video>
          <p class="vid-name">NAME REMOVED</p>
          <p class="vid-position">Position</p>
        </div>
      </div>
      <div class="owl-item" style="width: 275.552px; margin-right: 15px">
        <div class="testimonial-video-card-wrapper">
          <video>
            <source
              src="https://privacy.wpengine.com/wp-content/uploads/2021/12/name-removed.mp4"
              type="video/mp4"
            />
            Your browser does not support the video tag.
          </video>
          <p class="vid-name">NAME REMOVED</p>
          <p class="vid-position">Position</p>
        </div>
      </div>
    </div>
  </div>
  <div class="owl-nav disabled">
    <div class="owl-prev">
      <img
        src="https://cdn.privacy.com/wp-content/uploads/2021/12/play-icon-full.png"
      />
    </div>
    <div class="owl-next">
      <img
        src="https://cdn.privacy.com/wp-content/uploads/2021/12/play-icon-full.png"
      />
    </div>
  </div>
  <div class="owl-dots disabled">
    <div class="owl-dot active"><span></span></div>
    <div class="owl-dot"><span></span></div>
    <div class="owl-dot"><span></span></div>
  </div>
</div>