How to style Swiper in styled components?

Question

React

Can you please tell me how to style Swiper in styled components?
This styling method works, but the slider functionality stops working completely, although in react-router-dom these problems did not arise when styling 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

SliderItem = styled.div``

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