Add captions over the thumbnails in fancybox 3

Question

I'm using the following code to create a number of different fancybox galleries. I am using Fancybox V3. I want the captions of the videos to also show up on the thumbnails at the bottom. I can't seem to figure out how to get them there.

<script>
    jQuery( document ).ready(function() {
       
        // Array of selectors
    // This is to initalize fancybox galleries to work on taxonomy groups.
        
        var selectorsArray = [];
        jQuery.each(taxo_data, function(key, value) {
            selectorsArray.push('[data-fancybox="' + value + '"]');
        });
        
        // Concatenate selectors into a single string
        var concatenatedSelectors = selectorsArray.join(',');


        jQuery(concatenatedSelectors).fancybox({
                
    caption : function( instance, item ) {
        var caption = jQuery(this).data('caption') || '';
                //console.log(caption);
        return caption;
    },
            baseTpl:
                '<div class="fancybox-container" role="dialog" tabindex="-1">' +
                '<div class="fancybox-bg"></div>' +
                '<div class="fancybox-inner">' +
                '<div class="fancybox-infobar"><span data-fancybox-index></span>&nbsp;/&nbsp;<span data-fancybox-count></span></div>' +
                '<div class="fancybox-toolbar">{{buttons}}</div>' +
                '<div class="fancybox-navigation">{{arrows}}</div>' +
                '<div class="fancybox-stage"></div>' +
                                '<div class="fancybox-for-titles"></div>' +
                '<div class="fancybox-caption"><div class=""fancybox-caption__body"></div></div>' +
                '</div>' +
                '</div>',
            thumbs: {
                autoStart: true,
                axis: 'x',
                openEffect  : 'none',
                closeEffect : 'none',
                prevEffect : 'none',
                nextEffect : 'none',
                closeBtn  : false,
                arrows    : false,
                nextClick : true,
                helpers : {
                    title : {
                        type : 'inside'
                    },
                    thumbs : {
                        width : 50,
                        height : 50,
                            tpl: function(thumb, index) {
                            return '<div class="fancybox-thumb-caption">' + thumb.opts.caption + '</div>';
                            }
                    }
                }
            },
            afterLoad: function(instance, current) {
                // Update the content of fancybox-for-titles with the caption
                console.log(current.opts.caption);
                jQuery('.fancybox-for-titles').html(current.opts.caption);
            }
        });

console.log('end');

    });

</script>

I am able to get the captions for the current gallery item, but not for all of them. And I tried to use the afterLoad function but that wasn't working. I also tried to edit the tpl for the thumbs, but that didn't do anything. When Fancybox creates the row of thumbnails, I'd also just like to include the caption.