slick slider slides are not reducing when we add it in SP small sectio

Hi all, 

I am using react slick slider, if i add it in a SP Modern page full section(3 slides) it works perfectly.but if i placed it in the One-third right sections. The same 3 slides appeared with conjusted width even in al sections but i want it to reduce into 2 or 1 slides as per the placed section width.

What should i do to reduce the slides  when it is placed on diferrent sized zones.

I have placed code below.

export default class ReactSlickSlider extends React.Component<IReactSlickSliderProps, {}> {
  public render(): React.ReactElement<IReactSlickSliderProps> {
    var settings = {
      dots: true,
      infinite: false,
      speed: 500,
      slidesToShow: 4,
      slidesToScroll: 4,
      initialSlide: 0,
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: true,
            dots: true
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2,
            initialSlide: 2
          }
        },
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
    };
    return (
      <div>
        <h2> Responsive </h2>
        <Slider {...settings}>
          <div className={styles.card}>
            <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
          </div>
          <div className={styles.card}>
            <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
          </div>
          <div className={styles.card}>
            <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
          </div>
          <div className={styles.card}>
            <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
          </div>
          <div className={styles.card}>
            <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
          </div>
          <div className={styles.card}>
            <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
          </div>
          <div className={styles.card}>
            <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
          </div>
          <div className={styles.card}>
            <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
          </div>
        </Slider>
      </div>
      
    );
  }
}

Thanks in advance!