PDF is not viewing properly using LightGallery with Vue 3

Question

I am trying to use the dynamic mode in LightGallery with Vue 3, where I have an array of images and PDF files. When it encounters a PDF file, I set iframe: true to display it. However, the PDF is not viewing properly. I have attached an image of the current view. Also onBeforeClose And onCloseAfter not working.

image is showing correctly

but not pdf

HERE IS MY CODE

import lightGallery from 'lightgallery'; import lgThumbnail from 'lightgallery/plugins/thumbnail'; import lgZoom from 'lightgallery/plugins/zoom'; import lgRotate from 'lightgallery/plugins/rotate'; onMounted(() => { launchGallery(); })

const launchGallery = () => {
    const dynamicGallery = lightGallery($(this), {           
    dynamic: true,
    dynamicEl: state.data,
    addClass: 'iw-lightbox',
    escKey: true,
    share: false,
    loop: props.loop,
    index: state.startIndex,
    plugins: [lgZoom, lgThumbnail,lgRotate],
    onBeforeClose: function() {
        emit('resetImageArr',0);
        console.log("onCloseAfter");

    },
    onCloseAfter:function(){
            console.log("onCloseAfter");
    }
})

dynamicGallery.openGallery(0);

} });

@import 'lightgallery/css/lightgallery.css'; @import 'lightgallery/css/lg-thumbnail.css'; @import 'lightgallery/css/lg-zoom.css';

MY ARRAY LOOKS LIKE:

state.data =[ {
"src":"http://127.0.0.1:8000/shared-attachments-thumbnail/18", "thumb":"http://127.0.0.1:8000/shared-attachments-thumbnail/18", "downloadUrl":"http://127.0.0.1:8000/shared-attachments/18" }, { "src":"https://www.africau.edu/images/default/sample.pdf", "iframe":true, "downloadUrl":"http://127.0.0.1:8000/shared-attachments/25" } ]

What am i doing Wrong here?