React Styled Component слайдер в слайдере Swiper js

На странице 2 слайдера. Первый отвечает за пролистывание периода (например, 1987-1991, 1992- 1995, 1996 - 2000 и т д), второй - за пролистывание событий в периоде по каждому году (например, 87, 88, 89, 90, 91). Получается, слайдер в слайдере.

Стили для внутреннего и внешнего прописаны как разные компоненты и выглядят по типу:

const EventList = styled(Swiper)`
display: flex;
justify-content: center;
align-items: start;
`;

const EventItem = styled(SwiperSlide)`
display: flex;
flex-direction: column;
gap: 20px;
width: 320px;
flex-wrap: wrap;
`;

По идее это должны быть разные слайдеры, как если бы у них были разные классы

Кнопки реализованы как два разных компонента по типу кода ниже, соответственно они тоже должны работать отдельно друг от друга:

function SlideButtons() {
  const swiper = useSwiper();

  return (
    <BtnWrapper>
      <EventContainerBtn onClick={() => swiper.slidePrev()}>
        <BtnImg src={PrevIcon}/>
      </EventContainerBtn>
      <EventContainerBtn onClick={() => swiper.slideNext()}>
        <BtnImg src={NextIcon}/>
      </EventContainerBtn>
    </BtnWrapper>
    
  )
}

Внешние кнопки отрабатывают норм, внутренние отрабатывают как внешние, хотя должны пролистывать только год, а не целый период

В чем может быть проблема?