SplideJs Issues with video and slider carousel

I am using Splidejs for a slider carousel and a video carousel. I am having a issue where if I mount the video carousel first, the slider carousel does not render, and vise versa. Iv made sure to use different css selectors and they render correctly if they are the first mounted carousel so that does not seem to be the issue. Any guidance would be appreciated.

I receive this error for the second carousel.

Uncaught Error: [splide] null is invalid.

Current Code

  const splideVideo = new Splide( '#splide2', {
      heightRatio: 0.5625,
      cover      : true,
      video      : {
        loop: true,
      },
    } );
    
    splideVideo.mount( { Video } );
    
    const splideSlider = new Splide( '#slider1' );
    splideSlider.mount();

Was able to come to a solution.

//Splide Hero Slider 

const HeroSplideSlider = document.querySelector(".hero-splide-slider");

HeroSplideSlider && new Splide('.hero-splide-slider').mount();

//Splide Hero Splide

const splideVideo = document.querySelector(".splide-video");

const splideConfig = {
  heightRatio: 0.5625,
  cover      : true,
  video      : {
    loop: true,
  },
}

splideVideo && new Splide('.splide-video', splideConfig).mount( { Video } );