Carousel auto-scroll (horizontal) breaks when user scrolls (vertical)

[ritvij14]

daisy-bug.mov

I have the above carousel which I created using daisy UI and then added the following logic from JS to make it auto scroll.

  useEffect(() => {
    const interval = setInterval(() => {
      if (
        !imageUrls.some((item) => item.startsWith("http")) &&
        window.scrollY === 0
      ) {
        const nextSlide = (currentSlide + 1) % imageUrls.length;
        const nextSlideEle = document.getElementById(`slide${nextSlide}`);
        nextSlideEle?.scrollIntoView();
        setCurrentSlide(nextSlide);
      }
    }, 4000);

    return () => clearInterval(interval);
  }, [currentSlide, imageUrls]);

But as you can see in the video, part of the 2nd image is visible when the carousel scrolls back to image 1. This happens a lot on all 4 images whenever the user tries to do a vertical scroll. Its like horizontal scroll of the carousel just abruptly stops. Is this a daisy thing or a browser issue? Or is there something that I should modify in my JS code?