Cannot read properties of undefined (reading 'style') error when trying to create a slideshow

let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  slides[slideIndex - 1].style.display = "block";
}

.hero-heading {
  position: absolute;
  color: var(--lightest--colour);
  margin-left: 30em;
  margin-top: -18.5em;
  padding: 1em;
}

.hero-heading h4 {
  text-align: center;
  margin-top: -1em;
}

.hero-image {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0;
}

.hero-image img {
  width: 51vw;
}

.mySlides {
  filter: invert(100%) sepia(63%) saturate(7474%) hue-rotate(77deg) brightness(98%) contrast(94%);
  display: none;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: var(--orange--colour);
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.mySlides img {
  width: 48vw;
  height: 74.4vh;
  z-index: 2;
}

.slideshow-container {
  position: relative;
}

<div class="hero-base">
  <div class="hero-image">
    <img src="/Reference/Images/WhatsApp Image 2022-09-17 at 11.39.17.jpeg" alt="profile pic">
    <div class="skillset slideshow-container">
      <h3>Tech Stack</h3>
      <div class="mySlides fade">
        <img src="/Reference/Images/html5.png" alt="HTML 5">
      </div>
      <div class="mySlides fade">
        <img src="/Reference/Images/CSS3.png" alt="CSS 3">
      </div>
      <div class="mySlides fade">
        <img src="/Reference/Images/Javascript.png" alt="Javascript">
      </div>
      <div class="mySlides fade">
        <img src="/Reference/Images/Adobe XD.png" alt="Javascript">
      </div>
      <div class="mySlides fade">
        <img src="/Reference/Images/Bootstrap.png" alt="Bootstrap">
      </div>

      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
  </div>
</div>