lightGallery lightbox controls are not showing

Question

I am implementing lightGallery (https://www.lightgalleryjs.com/) in an Angular component and the controls are not showing, although each image in the gallery will go full screen when clicked on and the file path to the image is in the web address bar. I have to click the back page button to escape and no controls are visible.

I have imported @import '~lightgallery/css/lightgallery-bundle.min.css'; in my global styles and all plugins etc are installed

Below is my code:

GALLERY.COMPONENT.TS

import { Component, OnInit, OnDestroy, AfterViewInit, ElementRef, ViewChild } from '@angular/core';

// Import lightGallery and its plugins
import lightGallery from 'lightgallery';
import lgThumbnail from 'lightgallery/plugins/thumbnail';
import lgZoom from 'lightgallery/plugins/zoom';

@Component({
  selector: 'app-gallery',
  templateUrl: './gallery.component.html',
  styleUrls: ['./gallery.component.scss']
})
export class GalleryPageComponent implements OnInit, AfterViewInit, OnDestroy {
  @ViewChild('lightgallery', { static: false }) lightGalleryElement!: ElementRef;

  images = [
    { thumbnail: 'assets/images/gallery-images/10385234.jpg', full: 'assets/images/gallery-images/10385234.jpg' },
    { thumbnail: 'assets/images/gallery-images/10380552.jpg', full: 'assets/images/gallery-images/10380552.jpg' },
    { thumbnail: 'assets/images/gallery-images/10352429.jpg', full: 'assets/images/gallery-images/10352429.jpg' },
    { thumbnail: 'assets/images/gallery-images/10380640.jpg', full: 'assets/images/gallery-images/10380640.jpg' },
    { thumbnail: 'assets/images/gallery-images/10378460.jpg', full: 'assets/images/gallery-images/10378460.jpg' },
    { thumbnail: 'assets/images/gallery-images/10378594.jpg', full: 'assets/images/gallery-images/10378594.jpg' },
    { thumbnail: 'assets/images/gallery-images/10378761.jpg', full: 'assets/images/gallery-images/10378761.jpg' },
    { thumbnail: 'assets/images/gallery-images/10378775.jpg', full: 'assets/images/gallery-images/10378775.jpg' },
    { thumbnail: 'assets/images/gallery-images/10380536.jpg', full: 'assets/images/gallery-images/10380536.jpg' },
    { thumbnail: 'assets/images/gallery-images/10380586.jpg', full: 'assets/images/gallery-images/10380586.jpg' }
  ];

  private lightGalleryInstance: any;

  constructor() { }

  ngOnInit(): void {
  }

  ngAfterViewInit(): void {
    this.initializeLightGallery();
  }

  ngOnDestroy(): void {
    if (this.lightGalleryInstance) {
      this.lightGalleryInstance.destroy();
    }
  }

  initializeLightGallery() {
    if (this.lightGalleryElement) {
      this.lightGalleryInstance = lightGallery(this.lightGalleryElement.nativeElement, {
        dynamic: true,
        download: false,
        actualSize: false,
        thumbWidth: 100,
        controls: true,
        toggleThumb: true,
        addClass: 'custom-class-for-lightgallery',
        mode: 'lg-slide',
        plugins: [lgThumbnail, lgZoom],
        dynamicEl: this.images.map(img => ({ 'src': img.full, 'thumb': img.thumbnail })),
      });
    }
  }
}

GALLERY.COMPONENT.HTML

<div #lightgallery class="gallery-container">
  <a *ngFor="let image of images" href="{{ image.full }}" class="thumbnail">
    <img [src]="image.thumbnail" alt="Thumbnail" />
  </a>
</div>

GALLERY.MODULE.TS (irrelevant but in case)

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { GalleryPageComponent } from './gallery.component';
import { SharedModule } from '../shared/shared.module';
import { LightgalleryModule } from 'lightgallery/angular';

@NgModule({
  declarations: [
    GalleryPageComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    SharedModule
  ],
  exports: [
    GalleryPageComponent,
    LightgalleryModule
  ]
})
export class GalleryModule { }

GALLERY.COMPONENT.SCSS (temporary design while I get things working)

.gallery-container {
    display: flex;
    flex-wrap: wrap;
  }
  
  .thumbnail {
    width: 100px;
    height: 100px;
    margin: 10px;
    cursor: pointer;
  }
  
  .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

I expected images to open in a lightbox which has controls but no controls are visible.