Lightbox opened twice

[rimzzlabs]

I have installed this module and it's very helpful, thank you so much.

but I have a problem about the Lightbox, I've made Gallerize, a list of image and when I click some image, a lightbox of gallery will appear, but the problem is, I got twice lightbox, one with okay, and another one is just a blank lightbox, is there any problem with my code?

Here is gallery.component.ts:

import { Component, OnInit } from "@angular/core";
import { ClassValue } from "clsx";
import { twcls } from "src/libs";
import gallery from "src/data/gallery.json";
import { Gallery, GalleryItem, ImageItem } from "ng-gallery";
import { Lightbox } from "ng-gallery/lightbox";

@Component({
  selector: "app-gallery",
  templateUrl: "./gallery.component.html",
  styleUrls: ["./gallery.component.css"]
})
export class GalleryComponent implements OnInit {
  albums: Array<GalleryItem> = [];

  constructor(public gallery: Gallery, private lightbox: Lightbox) {}

  ngOnInit(): void {
    gallery.forEach((item) => {
      this.albums.push(new ImageItem(item));
    });
  }

  twclsx(...classes: ClassValue[]) {
    return twcls(...classes);
  }
}

And here is my gallery.component.html:

<section
    gallerize
    [ngClass]="twclsx('relative w-full', 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3', 'gap-4 flex-auto')"
  >
    <figure *ngFor="let prop of albums; let i = index" [ngClass]="twclsx('w-full aspect-[1/1.5]')">
      <img
        [src]="prop.data.thumb"
        [attr.imageSrc]="prop.data.src"
        [attr.thumbSrc]="prop.data.thumb"
        [lightbox]="i"
        [ngClass]="twclsx('h-full w-full object-cover hover:brightness-75 cursor-pointer')"
        alt=""
      />
    </figure>
  </section>

[rimzzlabs]

Oops, seems like Im missing something while reading the docs, I just need to remove the binding directive [lightbox]="i" on
<img /> element