Swiper React EffectCoverFlow not horizontal as expected, whats wrong?

Question

I am using [email protected] with coverflow effect all settings looks as needed but for some reason, my slider are in column, when expected in row, so there is the code

import 'swiper/swiper-bundle.min.css';

import React from 'react';

import cn from 'classnames';
import SwiperCore, { EffectCoverflow } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';

import HorizontalScroller from '../../../../components/HorizontalScroller';
import LiveCard from '../../../../components/LiveCard/LiveCard';

import { mockMoments, mockSoonMoment } from '../../../../assets/mockData/mockData';
import { LiveMomentStatus } from '../../../../types/liveMoment.type';

import { SLiveSliderContainer } from './Carousel.styled';

SwiperCore.use([EffectCoverflow]);

const Carousel = () => (
  <SLiveSliderContainer>
    <Swiper
      centeredSlides
      grabCursor
      slideToClickedSlide
      className="swiper-container"
      coverflowEffect={{
        rotate: 1,
        modifier: 2,
        stretch: 7,
        slideShadows: false,
      }}
      effect="coverflow"
      slidesPerView={2}
    >
      <HorizontalScroller>
        {mockMoments.map((moment) => (
          <SwiperSlide>
            {({ isActive }) => (
              <LiveCard
                key={moment.id}
                className={cn({ activeStyle: isActive })}
                fromOffset={moment.fromOffset}
                status={moment.status}
                thumbnailUrl={moment.thumbnailUrl}
                toOffset={moment.toOffset}
              />
            )}
          </SwiperSlide>
        ))}
        <SwiperSlide>
          {({ isActive }) => (
            <LiveCard
              key={mockSoonMoment.id}
              className={cn({ activeStyle: isActive })}
              fromOffset={mockSoonMoment.fromOffset}
              status={LiveMomentStatus.SOON}
              thumbnailUrl={mockSoonMoment.thumbnailUrl}
              toOffset={mockSoonMoment.toOffset}
            />
          )}
        </SwiperSlide>
      </HorizontalScroller>
    </Swiper>
  </SLiveSliderContainer>
);

export default Carousel;

It was working before but for now I got this result any ideas whats can be wrong with it? It should be row and a little spaced between them

here is the image