Not able to Scroll on Scroll Area that has full width

import Carousel from "nuka-carousel";

const Reader({ /* Items and things passed in here */}) {
 // Some buffer code here is not shown

  return (
    <Carousel
      withoutControls={true}
      renderAnnounceSlideMessage={undefined}
      enableKeyboardControls={true}
      swiping={true}
      dragging={false}
      speed={fullscreen ? 0 : 500}
      slideIndex={initialIndex}
      slidesToScroll="auto"
      afterSlide={(endSlideIndex) => {
        markRead(items[endSlideIndex]!);
      }}
      beforeSlide={(_, endSlideIndex) => {
        if (endSlideIndex == newBufferedItems.length - 1) {
          fetchNextPage();
        }
        debouncedReplace.current(newBufferedItems, endSlideIndex);
      }}
      className="min-h-full w-full"
    >
      {newBufferedItems?.map((item, index) => (
        <ScrollArea
          // It does now allow me to scroll on this like it should
          key={item.id}
          className="h-full overflow-x-auto overflow-y-visible"
        >
 <Markdown
              renderer={{
                image: (src, alt, title) => {
                  return (
                    <img
                      className="mb-2 mt-3.5 h-auto w-full rounded-[3px] border border-[#f1f1f2] dark:border-neutral-800"
                      alt={alt}
                      src={src}
                      key={src + alt + title}
                    />
                  );
                },
              }}
              value={item.website_content!}
            />
        </ScrollArea>
      ))}
    </Carousel>
  );
});

import Carousel from "nuka-carousel";

const Reader({ /* Items and things passed in here */}) {
 // Some buffer code here is not shown

  return (
    <Carousel
      withoutControls={true}
      renderAnnounceSlideMessage={undefined}
      enableKeyboardControls={true}
      swiping={true}
      dragging={false}
      speed={fullscreen ? 0 : 500}
      slideIndex={initialIndex}
      slidesToScroll="auto"
      afterSlide={(endSlideIndex) => {
        markRead(items[endSlideIndex]!);
      }}
      beforeSlide={(_, endSlideIndex) => {
        if (endSlideIndex == newBufferedItems.length - 1) {
          fetchNextPage();
        }
        debouncedReplace.current(newBufferedItems, endSlideIndex);
      }}
      className="min-h-full w-full"
    >
      {newBufferedItems?.map((item, index) => (
        <ScrollArea
          // It does now allow me to scroll on this like it should
          key={item.id}
          className="h-full overflow-x-auto overflow-y-visible"
        >
 <Markdown
              renderer={{
                image: (src, alt, title) => {
                  return (
                    <img
                      className="mb-2 mt-3.5 h-auto w-full rounded-[3px] border border-[#f1f1f2] dark:border-neutral-800"
                      alt={alt}
                      src={src}
                      key={src + alt + title}
                    />
                  );
                },
              }}
              value={item.website_content!}
            />
        </ScrollArea>
      ))}
    </Carousel>
  );
});