when i try to display images dynamically using map ,
the images do not appear in the gallery ,
but they appear when i do them statically
i don’t understand what the problem is
i work using Nextjs .

import LightGallery from "lightgallery/react/Lightgallery.es5";
import "lightgallery/css/lightgallery.css";
import lgThumbnail from "lightgallery/plugins/thumbnail";
import lgZoom from "lightgallery/plugins/zoom";

          <LightGallery
            speed={500}
            plugins={[lgThumbnail, lgZoom]}
            {...setting}
          >
            <div
              className="w-[95%] "
              data-src={productsData?.thumbnail}
              {...setting}
            >
              <a href={productsData?.thumbnail} {...setting2}>
                <img
                  src={productsData?.thumbnail}
                  alt={`img`}
                  className=" cursor-zoom-in w-full"
                />
              </a>
            </div>
            <div className=" gap-5 w-full  md:gap-5 flex">
              {productsData?.images?.map((ele, ind) => (
                <div
                  {...setting}
                  data-src={ele}
                  key={ind}
                  className="w-[120px] md:w-[80px] lg:w-[90px] max-w-full flex items-center justify-start"
                >
                  <a href={ele} {...setting2}>
                    <img
                      src={ele}
                      alt={`img${ind}`}
                      className=" cursor-zoom-in"
                    />
                  </a>
                </div>
              ))}
            </div>
          </LightGallery>```