Why am I getting an error when using PhotoSwipe within wordpress?

Question

I am using PhotoSwipe to display images within my web page developed using wordpress, using the code from the library to display an image as follows

<button id="btn">open</button>

   <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="pswp__bg"></div>
    <div class="pswp__scroll-wrap">
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close"></button>
                <button class="pswp__button pswp__button--share"></button>
                <button class="pswp__button pswp__button--fs"></button>
                <button class="pswp__button pswp__button--zoom"></button>
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>
            <button class="pswp__button pswp__button--arrow--left"></button>
            <button class="pswp__button pswp__button--arrow--right"></button>
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>
</div>

Then I implement the javascript function to show two images

<script>
    var openPhotoSwipe = function(){
        var pswpElement = document.querySelectorAll(\'.pswp\')[0];
        var items = [{
            src: \'https://empresas.blogthinkbig.com/wp-content/uploads/2019/11/Imagen3-245003649.jpg\',
            w: 1440,
            h:1024
        },
        {
            src: \'https://empresas.blogthinkbig.com/wp-content/uploads/2019/11/Imagen3-245003649.jpg\',
            w: 1440,
            h:1024
        }];
        
      var options = {
      history: false,
      focus: false,
      showAnimationDuration: 0,
      hideAnimationDuration: 0
          
      };

        
       var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
    gallery.init();
       
    }
    
     openPhotoSwipe();
     document.getElementById(\'btn\').onclick = openPhotoSwipe;
  </script>

Everything works fine, but when I go to my page to see the result, I find that the menu is above my PhotoSwipe

I tried to add a z-index, but it didn't work and the image is still hidden by the highlighted elements in the image

 .pswp {
z-index: 9999999999999999999;
}