Image slider for Light gallery React

I'm using light gallery for the image viewer. The problem here is when i have multiple images all those are stacked in rows with 2 images in a row and i have 10 rows for 20 images. So i'm trying to integrate a custom carousel in the light gallery with which i'll have one row of images and a slider.

Both work individually well but couldn't integrate. Also wanted to know if the light gallery has an slider inbuilt.

//Light gallery code:

<LightGallery speed={100} download={true} plugins={[lgThumbnail]} mode="lg-fade" >
                          {
                            abc.xyz.attachments.map((item: any) => {
                              let fileName = item.split('/').pop();
                              return (
                                <a
                                  data-lg-size="1400-933"
                                  className="gallery-item"
                                  data-src={item}
                                  data-sub-html={"<h4>" + fileName + "</h4>"}
                                >
                                  <img style={{ margin: '10px' }}
                                    className="img-responsive"
                                    src={item} width={240} height={160}
                                  />
                                </a>
                              )
                            })
                          }
                        </LightGallery>

//Carousel Code:

 <Carousel items={abc.xyz.attachments} />

Any help?