Tiny slider is tweaking at first image change and then go smooth. Thanks

like in topic, i have tiny slider who is tweaking at first change of image like 2 times and then go smooth and all is good, but first load gives tweak of try 2 change image.
Maybe u can figure it out? Really thanks for time, and i am fresh in webdev so dont be rude at me 😛

$(function() {
  const wrapper = $('#slider');

  setInterval(function() {
    const firstChild = $(wrapper).children()[0];
    $(firstChild)
      .fadeOut(1000)
      .next('a')
      .fadeIn(1000)
      .end()
      .appendTo('#slider');
  }, 3000);
});

img {
  max-width: 100%;
}

#slider:after {
  content: "";
  display: table;
  clear: both;
}

#slider img {
  float: left;
  margin: 0 -100% 0 0;
}

#slider {
  width: 200px;
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<figure id="slider">
  <a target="_blank" href="http://www.google.pl">
    <img src="https://i1.kwejk.pl/k/obrazki/2020/11/kwzgq1D7NOtJnNRp.jpg" />
  </a>
  <a target="_blank" href="http://www.google.pl">

    <img src="https://media.istockphoto.com/vectors/adorable-hedgehog-in-modern-flat-style-vector-vector-id930758362?k=20&m=930758362&s=612x612&w=0&h=UjgzuyypJq1tNI3RVKqlB1DjS1He72xtlw47DNWvFi8=" />
  </a>
  <a target="_blank" href="http://www.google.pl">

    <img src="https://img.redro.pl/plakaty/african-hedgehog-rolling-over-while-looking-at-camera-happy-400-195157167.jpg" />
  </a>
</figure>