React : Script 'Failed to compile' using componentDidMount()

Question

Setup

I've loaded the Vanilla JS library lightgallery.js through NPM and importing it as normal.

Issue

I'm initializing this library through componentDidMount(), but it's failing to compile because 'lightGallery' is not defined. see sample below

I verified the library is importing by removing componentDidMount() and initializing it through the Chrome Console. When I do this, it works as intended.

I'm not clear on why it's resulting in 'lightGallery' is not defined when the import clearly works when i don't initialize it with componentDidMount(). I'm guessing it's either an issue with the elements not being present in the DOM at load or it's an issue with the way my import is setup.

Any help would be appreciated.

Current Page

This is a stripped down version of my setup with the gallery elements hardcoded for easy explanation.

import React, { Component } from 'react';
import 'lightgallery.js';

class Gallery extends Component {

    componentDidMount() {
        lightGallery(document.getElementById('lightgallery'));
    }

    render() {

        return (
            <>
                <section>
                    <h1>Gallery</h1>
                </section>
                <section>
                    <div id="lightgallery">
                        <a href="img/img1.jpg">
                            <img src="img/thumb1.jpg" />
                        </a>
                        <a href="img/img2.jpg">
                            <img src="img/thumb2.jpg" />
                        </a>
                        <a href="img/img3.jpg">
                            <img src="img/thumb3.jpg" />
                        </a>
                    </div>
                </section>
            </>
        ); 
    }
}

export default Gallery;