Przeglądarka zdjęć z danej kategorii

Hej, jak zrobić żeby przy otwarciu "preview-box" można było strzałkami w lewo i w prawo przejść TYLKO po zdjęciach z danej kategorii (tych które zostają na ekranie po kliknięciu jednego z przycisków filtrujących zdjęcia)? Próbowałem dodawać i usuwać listenery, updatować "shownImages", zmieniać kolejność itd. ale nic nie działa, pewnie rozwiązanie jest oczywiste ale dzisiaj już nic nie wymyślę. Jeżli ktoś miałby ochotę rzucić na to okiem to byłbym bardzo wdzięczny.

https://codepen.io/u7th4e/pen/vYQEmVw

const items = document.querySelector(".items"),
      images = document.querySelectorAll(".gallery .image");

let currentIndex = 0;

images.forEach(img => img.classList.add("shownImg"));
var shownImages = document.querySelectorAll(".shownImg");

window.addEventListener("DOMContentLoaded", () => {
  items.addEventListener("click", (selectedItem) => {
    if (selectedItem.target.classList.contains("item")) {
      items.querySelector(".active").classList.remove("active");
      selectedItem.target.classList.add("active");
      let filterName = selectedItem.target.getAttribute("data-name");
      images.forEach((image) => {
        let filterImges = image.getAttribute("data-name");

        if (filterImges == filterName || filterName == "all") {
          image.classList.remove("hide");
          image.classList.add("show", "shownImg");
        } else {
          image.classList.add("hide");
          image.classList.remove("show", "shownImg");
        }
      });
    }
  });

  shownImages.forEach((img, index) => {
    img.addEventListener("click", () => {
      currentIndex = index;
      preview();
    });
  });

});

const previewBox = document.querySelector(".preview-box"),
  previewImg = previewBox.querySelector("img"),
  closeIcon = previewBox.querySelector(".icon"),

  prev = document.querySelector(".btn-prev"),
  next = document.querySelector(".btn-next");

prev.addEventListener("click", () => {
  currentIndex != 0 ? currentIndex-- : undefined;
  preview();
});

next.addEventListener("click", () => {
  currentIndex != shownImages.length - 1 ? currentIndex++ : undefined;
  preview();
});

function preview() {
  previewImg.src = shownImages[currentIndex].querySelector("img").src;

  previewBox.classList.add("show");

  closeIcon.addEventListener("click", () => {
    previewBox.classList.remove("show");
  });
}

function nextIdx(dataset) {
  let images_idx = Array.from(images).flatMap((e, i) => e.dataset.name == dataset || dataset == 'all' ? [i] : [])
  let idx = images_idx.findIndex((e, i) => e === currentIndex)
  let newIdx = idx < images_idx.length-1 ? idx+1 : idx;
  return images_idx[newIdx]
}

function prevIdx(dataset) {
  let images_idx = Array.from(images).flatMap((e, i) => e.dataset.name == dataset || dataset == 'all' ? [i] : [])
  let idx = images_idx.findIndex((e, i) => e === currentIndex)
  let newIdx = idx > 0 ? idx-1 : 0;
  return images_idx[newIdx];
}

prev.addEventListener("click", () => {
  //currentIndex != 0 ? currentIndex-- : undefined;
  let dataset = document.querySelector("div.gallery-item.active").dataset.name
  currentIndex = prevIdx(dataset);
  preview();
});

next.addEventListener("click", () => {
  //currentIndex != shownImages.length - 1 ? currentIndex++ : undefined;
  let dataset = document.querySelector("div.gallery-item.active").dataset.name
  currentIndex = nextIdx(dataset);
  preview();
});

Możesz sobie tam jakoś powydzielać, nie chciało mi się to na szybko coś napisałem, pewnie mogą być lepsze sposoby osiągnięcia tego samego.