Expected behavior Open Preview of Light Box Actual behavior Open and Instantly Close the Preview ... Did I do something wrong to my gallery ? Resources (screenshots, code snippets etc.)

<div class="col-md-12">
                <div class="ecommerce-gallery vertical">
                    <div class="row">
                        <div class="col-4 col-sm-3">
                            <div class="multi-carousel vertical" data-mdb-items="2">
                                <div class="multi-carousel-inner">

                                        <div class="multi-carousel-item" style="height: 50%; display: flex;">
                                            <img src="https://localhost:44396/Uploads/dfd87bad-d0b4-4564-a368-4b7447f477a9/6/Thumbnails/147b0247-6bb4-4dbf-87d2-3b8a7db49530.Jpeg" data-mdb-img="https://localhost:44396/Uploads/dfd87bad-d0b4-4564-a368-4b7447f477a9/6/Images/147b0247-6bb4-4dbf-87d2-3b8a7db49530.Jpeg" alt="147b0247-6bb4-4dbf-87d2-3b8a7db49530.Jpeg" class="w-100">
                                        </div>
                                <div class="multi-carousel-item active" style="height: 50%; display: flex; margin-top: 0px;">
                                        <img src="https://localhost:44396/Uploads/dfd87bad-d0b4-4564-a368-4b7447f477a9/6/Thumbnails/d4e189ac-158f-4651-88c6-2073145b15aa.Jpeg" data-mdb-img="https://localhost:44396/Uploads/dfd87bad-d0b4-4564-a368-4b7447f477a9/6/Images/d4e189ac-158f-4651-88c6-2073145b15aa.Jpeg" alt="Gallery image 1" class="w-100 active">
                                    </div></div>
                                <button class="carousel-control-prev" tabindex="0" type="button" data-mdb-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                </button>
                                <button class="carousel-control-next" tabindex="0" type="button" data-mdb-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                </button>
                            </div>
                        </div>
                        <div class="col-8 col-sm-9">
                            <div class="lightbox" data-id="lightbox-u55zv76bf"><img src="https://localhost:44396/Uploads/dfd87bad-d0b4-4564-a368-4b7447f477a9/6/Images/d4e189ac-158f-4651-88c6-2073145b15aa.Jpeg" alt="Gallery image 1" class="ecommerce-gallery-main-img w-100 active"><img src="https://localhost:44396/Uploads/dfd87bad-d0b4-4564-a368-4b7447f477a9/6/Images/147b0247-6bb4-4dbf-87d2-3b8a7db49530.Jpeg" alt="147b0247-6bb4-4dbf-87d2-3b8a7db49530.Jpeg" class="ecommerce-gallery-main-img w-100"></div>
                        </div>
                    </div>
                </div>
            </div>