Fade effect blinks first time it’s triggered, but then works as intended

I’m experiencing an unwanted visual effect when changing tabs. What I want is for .policyCentre__content sections to fade out slowly, and to fade in the relevant section slowly too. However, when you change tab initially, if it’s the first time the matching policyCentre__content is loaded, it will blink in, rather than fade.

See steps to reproduce:

  1. Run the below demo (you will start off with “tab 1” active.
  2. Click “tab 2” and watch the content appear (“tab 1” content fades out, but content for “tab 2” just appears.
  3. Click back onto “tab 1”, and the content disappears and appears as intended.
  4. Click back onto “tab 2” and it now works as intended.

Unsure why the 2nd step initially just makes the content appear?

$(function() {

  function showContent(val){
    $(".policyCentre__content.active").fadeOut(500, function() {
      $(this).removeClass("active");
      $(window).scrollTop(0);
      $(".policyCentre__content[data-item='" + val + "']").addClass('active').fadeIn(500, function() {
        locked = false;
      })
    });
  }

  // prevent the UI from getting over-clicked
  let locked = false;

  $(".policyCentre__label:first, .policyCentre__content:first").addClass("active");

  $('.policyCentre__label').click(function() {
    if (locked) return;
    locked = true;
    var id = $(this).attr('data-item');
    $(".policyCentre__label").removeClass("active");
    $(this).addClass("active");
    showContent(id);
  });
  
  });
.policyCentre {
  border: 1px solid black;
  padding: 60px 0;
}
.policyCentre__label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  margin-bottom: 10px;
  width: fit-content;
  display: flex;
  align-items: center;
}
.policyCentre__label:hover, .policyCentre__label.active {
  color: orange;
}
.policyCentre__content {
  display: none;
  padding-left: 50px;
}
.policyCentre__content.active {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<section class="policyCentre">
  <div class="container">
    <div class="row justify-content-between">

      <div class="col-2">
        <div class="policyCentre__tabs">
          <span class="policyCentre__label" data-item="tab-1">Tab 1</span>
          <span class="policyCentre__label" data-item="tab-2">Tab 2</span>
          <span class="policyCentre__label" data-item="tab-3">Tab 3</span>
        </div>
      </div>

      <div class="col-10">
        <div class="policyCentre__content" data-item="tab-1">Copy for tab 1</div>
        <div class="policyCentre__content" data-item="tab-2">Copy for tab 2</div>
        <div class="policyCentre__content" data-item="tab-3">Copy for tab 3</div>
      </div>

    </div>
  </div>
</section>