Как стилизовать Swiper в styled components?

Question

[Alexander]

Подскажите пожалуйста как стилизовать Swiper в styled components?
Данный способ стилизации работает, но фунцкионал слайдера перестает работать полностью, хотся в react-router-dom этих проблем не возникало при стилизации Link

<Slider 
        spaceBetween={50}
        slidesPerView={3}
        onSlideChange={() => console.log('slide change')}
        onSwiper={(swiper) => console.log(swiper)}
        pagination={{ clickable: true }}
      >
        <SliderItem >Slide 1</SliderItem >
        <SliderItem >Slide 2</SliderItem >
        <SliderItem >Slide 3</SliderItem >
        <SliderItem >Slide 4</SliderItem >
        ...
      </Slider >

import { Swiper, SwiperSlide } from 'swiper/react'

export const Slider = styled(Swiper)`
  /* background-color: red; */
`
export const SliderItem = styled(SwiperSlide)``

Answer 1

[vladcorn]

SliderItem = styled.div``

<Slider>
{data.map((item)=>{
return (
<SwiperSlide key={item.id}>
   <SliderItem {...item}>
</SwiperSlide>)
})}
</Slider>