How can I pause and resume a setInterval function with Jquery/JS within a loop?

Question

I'm setting up tabs that have animated timer bar indicators. To achieve that I'm using setInterval to loop through a ul adding a .active class to the li and then removing it after 3 seconds.

I've got that part down, but I'd like to pause the loop when hovering over a separate div and this is where I can't quite get it.

The code in this jsfiddle demonstrates that I can get the animation to stop on hovering on the separate div but the loop continues to run in the background meaning the animation will trigger on the next li regardless.

Ideally the end result should be that the animation on the indicator paused and then resumes from where it paused when the user stops overing on the separate div.

Can anyone help please?

Here's the code:

Html

<div class="tab-column">
  <div class="tab-wrap">
    <h2>
    Hover to stop animation
    </h2>
  </div>
</div>

<div class="tab-indicators">
  <ul>
    <li>
      <div></div>
    </li>
    <li>
      <div></div>
    </li>
    <li>
      <div></div>
    </li>
  </ul>
</div>

CSS

body {
  background-color: black;
}

.tab-column {
  display: flex;
  width: 100px;
  height: 100px;
  background-color: white;
}

.tab-wrap {
  width: 100px;
  height: 100px;
}

.tab-indicators ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  max-width: 282px;
  width: 100%;
  margin: 0 auto;
  margin-top: 32px;
}

.tab-indicators ul li {
    background-color: grey;
    max-width: 63px;
    width: 100%;
    height: 4px;
    border-radius: 12px;
  }

.active {
    div {
      background-color: #fff000;
      height: 4px;
      width: 0%;
      border-radius: 12px;
      animation: vertical-tab-progress-bar 3s;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
    }
  }

.paused div {
   animation-play-state: paused;
}

@keyframes vertical-tab-progress-bar {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

JS/JQuery

var $items = $('.tab-indicators ul li'),
      timer = 3000;
      $items.first().addClass('active');

  setInterval(function(){
    var $current = $items.filter('.active'),
        $next = $current.next().length ? $current.next() : $items.first();

    $current.removeClass('active');
    $next.addClass('active');
  }, timer);



  $(".tab-column .tab-wrap").on("mouseenter", function() {
        $(".tab-indicators ul .active").addClass("paused");
    }).on("mouseleave", function() {
        $(".tab-indicators ul .active").removeClass("paused");
  });