Swiper function fails in for loop: Cannot set property 'control' of undefined

[hellogracecho]

Hi.

I'm working on Statamic project with Swiper core js.

I wanted to call Swiper functions with product image gallery with Two ways: main slider + Thumbnails controller
The slider should be init

1. when custom button is clicked in the list of products. e.g. click to see more information
2. Single page is loaded

So I run for loop in case there are more than one button in #1 case.
It works fine in single page but it fails saying Uncaught TypeError: Cannot set property 'control' of undefined
I imported all the modules I'm using like below:

Where am I missing or doing wrong?

Kind regards,
Grace

import Swiper from "swiper";
import SwiperCore, {
    Navigation,
    Thumbs,
    EffectFade,
    Controller,
} from "swiper/core";
import "swiper/swiper-bundle.css";

// configure Swiper to use modules
SwiperCore.use([Navigation, Thumbs, EffectFade, Controller]);

const allButtons = document.querySelectorAll(".btn-init-swiper");

if (allButtons.length) {
    // single collection page with multiple product items
    for (let index = 0; index < allButtons.length; index++) {
        const element = allButtons[index];
        element.addEventListener("click", function () {
            const singleProductDOM = this.closest(".single-product");
            const slideNumber =
                singleProductDOM.querySelector(".gallery").dataset.slideNumber;
            setTimeout(() => {
                initSwiper(slideNumber);
            }, 1);
        });
    }
} else {
    // single product page
    const slideNumber = document.querySelector(".gallery")
        ? document.querySelector(".gallery").dataset.slideNumber
        : null;
    initSwiper(slideNumber);
}

function initSwiper(slideNumber) {
    console.log("gallery image count: ", slideNumber);

    // init Swiper
    const slider = new Swiper(".gallery-slider", {
        slidesPerView: 1,
        loop: false,
        loopedSlides: slideNumber,
        autoHeight: true,
        effect: "fade",
        fadeEffect: {
            crossFade: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
        breakpoints: {
            768: {
                direction: "vertical",
            },
        },
    });

    const thumbs = new Swiper(".gallery-thumbs", {
        slidesPerView: "auto",
        spaceBetween: 10,
        centeredSlides: true,
        loop: false,
        slideToClickedSlide: true,
        breakpoints: {
            768: {
                direction: "vertical",
                spaceBetween: 16,
            },
        },
    });

    slider.controller.control = thumbs;
    thumbs.controller.control = slider;
}