Issue with LightGallery: Zoom and Slider not working with grid layout

Question

I'm facing an issue with the LightGallery component in my React application. I want to display a grid of images using LightGallery, enable zoom functionality for each image, and have a slider to navigate between the images. However, I'm encountering problems where the zoom and slider features are not working properly when I have the images arranged in a grid layout.

I have tried different approaches, including wrapping each image in a separate component and using a single component with multiple tags. The zoom feature works fine when I use a single tag without the grid layout, but it doesn't work when I use multiple tags in a grid. Additionally, the slider functionality doesn't work in the given implementation.

Here's the code snippet for my current implementation:

import React from "react";
import LightGallery from "lightgallery/react";

// import styles
import "lightgallery/css/lightgallery.css";
import "lightgallery/css/lg-zoom.css";
import "lightgallery/css/lg-thumbnail.css";

// import plugins if you need
import lgThumbnail from "lightgallery/plugins/thumbnail";
import lgZoom from "lightgallery/plugins/zoom";

import Galary1 from "../assets/Galary1.jpg";
import Galary2 from "../assets/Galary2.jpg";
import Galary3 from "../assets/Galary3.jpg";
import Galary4 from "../assets/Galary4.jpg";
import Galary5 from "../assets/Galary5.jpg";
import Galary6 from "../assets/Galary6.jpg";
import Galary7 from "../assets/Galary7.jpg";
import Galary8 from "../assets/Galary8.jpg";
import Galary9 from "../assets/Galary9.jpg";
import Galary10 from "../assets/Galary10.jpg";
import Galary11 from "../assets/Galary11.jpeg";
import Galary12 from "../assets/Galary12.jpeg";

import "./Test.css";

const Test = () => {
  const galleryOptions = {
    plugins: [lgThumbnail, lgZoom],
    slideEndAnimatoin: false,
    hideBarsDelay: 1000,
    controls: false,
  };

  const images = [
    { src: Galary1, thumb: Galary1 },
    { src: Galary2, thumb: Galary2 },
    { src: Galary3, thumb: Galary3 },
    { src: Galary4, thumb: Galary4 },
    { src: Galary5, thumb: Galary5 },
    { src: Galary6, thumb: Galary6 },
    { src: Galary7, thumb: Galary7 },
    { src: Galary8, thumb: Galary8 },
    { src: Galary9, thumb: Galary9 },
    { src: Galary10, thumb: Galary10 },
    { src: Galary11, thumb: Galary11 },
    { src: Galary12, thumb: Galary12 },
  ];

  return (
    <div className="gallery-container">
      <div className="gallery-grid">
        <div className="gallery-row">
          {images.map((image, index) => (
            <a
              key={index}
              className="gallery-item"
              href={image.src}
              data-lg-size="1600-1200"
            >
              <img
                src={image.thumb}
                alt="Atri Muni"
                className="img-responsive"
              />
            </a>
          ))}
        </div>
      </div>
      <LightGallery dynamic={true} {...galleryOptions}>
        {images.map((image, index) => (
          // eslint-disable-next-line jsx-a11y/anchor-has-content
          <a
            key={index}
            href={image.src}
            data-lg-size="1600-1200"
            data-src={image.src}
          ></a>
        ))}
      </LightGallery>
    </div>
  );
};

export default Test;

CSS code:

.gallery-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px;
    margin-top: 50px;
  }
  
  .gallery-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
    margin-bottom: 20px;
  }
  
  .gallery-item {
    flex: 0 0 calc(33.33% - 10px);
    position: relative;
    overflow: hidden;
    border-radius: 10px;
  }
  
  .gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Media query for mobile responsiveness */
  @media (max-width: 768px) {
    .gallery-row {
      grid-template-columns: repeat(1, 1fr);
    }
  }
  

I have also included the necessary CSS for the gallery layout. However, the zoom and slider features don't work as expected. Clicking on the images doesn't trigger the zoom, and the slider doesn't navigate between the images.

Zoom feature basically doesn't work when I have a div element inside the tags.

I have researched and tried some suggestions from the LightGallery documentation and Stack Overflow threads, but I haven't been able to resolve the issues.

I would greatly appreciate any insights or suggestions on how to make the zoom and slider features work with a grid layout using LightGallery. Thank you in advance for your help!