Uncaught ReferenceError: Isotope is not defined

I'm attempting to integrate the Isotope library into my custom WordPress theme to achieve filtering and sorting functionality. However, I'm encountering an error in the console: "Isotope is not defined." I've followed the steps to enqueue Isotope and jQuery, and I'm not sure what's causing this issue. here is my functions.php file code

function amco_enqueue_assets()
{
    // Enqueue your stylesheets
    wp_enqueue_style('fontawesome', get_template_directory_uri() . '/css/all.min.css', [], '6.4.0', 'all');
    wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', [], '5.2.3', 'all');
    wp_enqueue_style('custome-css', get_template_directory_uri() . '/css/style.css', [], filemtime(get_template_directory() . '/css/style.css'), 'all');
    wp_enqueue_style('main-style', get_stylesheet_uri(), [], '1.0.0');
    // Enqueue your scripts
    wp_enqueue_script('jquery', get_template_directory_uri() . '/js/jquery.min.js', [], '3.6.1');
    wp_enqueue_script('bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', ['jquery'], '5.2.3');
    wp_enqueue_script('isotope', get_template_directory_uri() . '/js/isotope.pkgd.js', ['jquery'], '5.2.3', true);
    // //eqnueue filter js
    wp_register_script('main-script', get_template_directory_uri() . '/js/main.js',  [], filemtime(get_template_directory() . '/js/main.js'));
    wp_enqueue_script('lightbox-js', get_template_directory_uri() . '/js/lightbox.bundle.min.js', ['jquery'], '1.8.3');
    // Enqueue the registered script
    wp_enqueue_script('main-script', true);
}


add_action('wp_enqueue_scripts', 'amco_enqueue_assets');

here is my main.js file

  var gridElement = document.querySelector('#trade-list');
  var grid = new Isotope(gridElement, {
    transitionDuration: "0.5s",
  });
  
  // Filter items on button click
  var filterButtons = document.querySelectorAll(".filter-button-group button");
  
  filterButtons.forEach(function (button) {
    button.addEventListener("click", function () {
      var filterValue = this.getAttribute("data-filter");
      grid.arrange({ filter: filterValue });
    });
  });
  

It was all about the order your files are loading / running in. You have to make sure your 'isotope' file is loading before your 'main' file, and you have to make sure your 'main' file is loaded in after the html because you do a querySelector in your main script.