How can change image in Magnific Popup, when thumb active image changes?

Question

I have thumb slider images with Magnific Popup.

When I click the large image, the modal opens (Magnific Popup), and the image loads. But the problem is that when I click other images in the thumb slider, large image changes. If i click it, the first image uploads.

Codes

                      <div class="content-product-left class-honizol col-md-5 col-sm-12 col-xs-12">
                            <div class="large-image">
                                <img itemprop="image" class="product-image-zoom" id="product-image-zoom"
                                    src="{{ image_url($product->combination_image[0]->pivot->image) }}"
                                    {{-- @endforeach --}} title="" alt="">
                            </div>

                            <div id="thumb-slider"
                                class="yt-content-slider full_slider owl-drag owl2-carousel owl2-theme owl2-responsive-1200 owl2-loaded"
                                data-rtl="yes" data-autoplay="no" data-autoheight="no" data-delay="4" data-speed="0.6"
                                data-margin="10" data-items_column00="4" data-items_column0="4" data-items_column1="3"
                                data-items_column2="4" data-items_column3="1" data-items_column4="1" data-arrows="yes"
                                data-pagination="no" data-lazyload="yes" data-loop="no" data-hoverpause="yes">
                                @foreach ($product->combination_image as $key => $combination)
                                    <a data-index="{{ $key }}" class="img thumbnail"
                                        data-image="{{ image_url($combination->pivot->image) }}" title="">

                                        <img src="{{ image_url($combination->pivot->image) }}" title=""
                                            alt="">
                                    </a>
                                @endforeach
                            </div>

                        </div>

JS (magnific popup)

        const productImageZoom = document.getElementById("product-image-zoom");

            $('.large-image').magnificPopup({
                items: {
                    src: productImageZoom.src
                },

                gallery: {
                    enabled: true,
                    preload: [0, 2]
                },
                type: 'image',
                mainClass: 'mfp-fade',
                callbacks: {
                    open: function() {
                        var activeIndex = parseInt($('#thumb-slider .img.active').attr(
                            'data-index'));
                        var magnificPopup = $.magnificPopup.instance;
                        magnificPopup.goTo(activeIndex);
                    }
                }
            });

I tried magnificPopup.updateItemHTML(); but it did not work