JavaScript code not working in Squarespace

I've been coding my first carousel I want to install it into my Squarespace website but the JavaScript doesn't seem to be working. Its all working in VS code and displays fine but Squarespace just doesn't seem to like it.

I've injected the code into the page header and enclosed it in script tags,

I'm very new to this so would appreciate the help.

<script>

const track = document.querySelector('.carousel__track');
const slides = Array.from(track.children);
const nextBtn = document.querySelector('.carousel__button--right');
const prevBtn = document.querySelector('.carousel__button--left');
const dotsNav = document.querySelector('.carousel__nav');
const dots = Array.from(dotsNav.children);

// Setting the Slide Positions

const slideWidth = slides[0].getBoundingClientRect().width;

console.log(slideWidth);

const setSlidePosition = (slides, index) => {
  slides.style.left = slideWidth * index + 'px';
}

slides.forEach(setSlidePosition);

// Breifer Function for Moving Slides

const moveToSlide = (track, currentSlide, targetSlide) => {
  track.style.transform = 'translateX( -' + targetSlide.style.left + ')';
  currentSlide.classList.remove('current-slide');
  targetSlide.classList.add('current-slide')
} 

// Update Dots Function 

const updateDots = (currentDot, targetDot) => {
  currentDot.classList.remove('current-slide')
  targetDot.classList.add('current-slide')
}

  // Hiding and Displaying Arrows When the end or the beggining Slide is reached

const hideShowArrows = (slides, prevBtn, nextBtn, targetIndex) => {

  if(targetIndex === 0) {
    prevBtn.classList.add('is-hidden');
    nextBtn.classList.remove('is-hidden');
  } else if(targetIndex === slides.length - 1) {
    prevBtn.classList.remove('is-hidden')
    nextBtn.classList.add('is-hidden')
  } else {
    prevBtn.classList.remove('is-hidden');
    nextBtn.classList.remove('is-hidden');
  }

}

// When I Click Left - Move Slides Left

prevBtn.addEventListener('click', e =>{
  const currentSlide = track.querySelector('.current-slide');
  const prevSlide = currentSlide.previousElementSibling;
  const currentDot = dotsNav.querySelector('.current-slide')
  const prevDot = currentDot.previousElementSibling;
  const prevIndex = slides.findIndex(slide => slide === prevSlide);

  moveToSlide(track, currentSlide, prevSlide);
  updateDots(currentDot, prevDot);
  hideShowArrows(slides, prevBtn, nextBtn, prevIndex)
})

// When I Click Right - Move Slide Right 

nextBtn.addEventListener('click', e => {
  const currentSlide = track.querySelector('.current-slide');
  const nextSlide = currentSlide.nextElementSibling;
  const currentDot = dotsNav.querySelector('.current-slide')
  const nextDot = currentDot.nextElementSibling;
  const nextIndex = slides.findIndex(slide => slide === nextSlide);

  moveToSlide(track, currentSlide, nextSlide)
  updateDots(currentDot, nextDot);
  hideShowArrows(slides, prevBtn, nextBtn, nextIndex)
})

// When I Click Nav Indicators - Move To Specified Slide

dotsNav.addEventListener('click',e =>{

  // What Indicator Was Clicked 

  const targetDot = e.target.closest('button');
  const currentSlide = track.querySelector('.current-slide');
  const currentDot = dotsNav.querySelector('.current-slide');
  const targetIndex = dots.findIndex(dot => dot === targetDot);
  const targetSlide = slides[targetIndex];

  moveToSlide(track, currentSlide, targetSlide);
  updateDots(currentDot, targetDot)
  hideShowArrows(slides, prevBtn, nextBtn, targetIndex)

})

</script>