Incorrect fancybox behavior?

Question

JavaScript

I'm using the latest version of Fancybox. I have a gallery like this: On the
left is a thumbnail, and in the center, by clicking on a thumbnail, the src of the clicked thumbnail is loaded.
What is the essence of the problem: when you click on the main picture (the one in the center), an inactive image opens and the first thumbnail is the first one. And the second one, when opening a modal window with pictures, the first picture is duplicated, as I understand it, because the second one is added from the main picture.
I wanted to add to the codepen to make it more understandable, but I have to transfer too much. So I'll just drop the pieces of code, it's a big image

<div class="product__main-img">
    <a data-fancybox="gallery" data-src="<? the_post_thumbnail_url('full') ?>" style="background-image: url('<? the_post_thumbnail_url('full') ?>');">
    </a>
</div>

And this is the year of miniatures:

<div class="swiper-slide product__slide product-image">
                <img src="<?=$imageThumbnail?>" >
                <a style="display: none" data-fancybox="gallery" href="<?= wp_get_attachment_image_url($attachment_id, 'full') ?>">
                </a>
            </div>

Tell me what I'm doing wrong, maybe I'm setting data-fancybox wrong, if I didn't finish it, ask for clarification