Slick-slide in react.js

Question

I'm making a slick-slide in react.js of facebook posts embedded with iframes and when resizing the website to smaller the iframes are stacking up on eachother

using this https://react-slick.neostack.com/docs/example/multiple-items your text

import React from 'react';
import Slider from "react-slick";
import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";

import './header.css';

const settings = {
  accessibility:true,
  dots: true,
  autoplay: true,
  autoplaySpeed: 3000,
  speed: 1000,
  slidesToShow: 3,
  slidesToScroll: 1,
};


const Header = () => {
  return (
    <div className="pse__header section__padding" id="home">
      <div className="pse__header-conent">
        <h1 className="gradient__text">HÍREK</h1>
        <div className='pse__facebook'>
          <Slider {...settings}>
            <div><iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fpecsisulyemeles%2Fposts%2Fpfbid0pW6vBm4aR1qBUykad2KwuqzfEFGnsQsrDUkWtMKMQqRYgnsvvAB4K3CLdikNWiY6l&show_text=true&width=500" width="500" height="729" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
            </div>
            <div><iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fphoto%2F%3Ffbid%3D732666255543240%26set%3Dpcb.732677392208793&width=500&show_text=true&height=710&appId" width="500" height="710" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
            </div>
            <div><iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fpecsisulyemeles%2Fposts%2Fpfbid02qkqT6kTR7dbwGMEPL6NGQfjfyzVqvMZpek2exc48Hzv7k5q6Nx1JJzxnzDS27L9Rl&show_text=true&width=500" width="500" height="710" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
            </div>
            <div><iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fpecsisulyemeles%2Fposts%2Fpfbid02afjcgmmL67TK8AhGJvXdcFmdK5akNpo7oSjTQNcsm9k4BV6CCvjryasXYXfZjTHFl&show_text=true&width=500" width="500" height="791" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
            </div>
            <div><iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fpecsisulyemeles%2Fposts%2Fpfbid02AJ1Yr15gWCgczvnkgrchiYAUi8fKoHmGraUJ3kMfM6QS91sPHvgSPsZUz777YeJYl&show_text=true&width=500" width="500" height="671" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
            </div>          
          </Slider>
        </div>
      </div>
    </div>
  )
}

export default Header

I tried this to show less slides when resizing but it did nothing

const settings = { dots: true, infinite: true, speed: 1000, slidesToScroll: 1, slidesToShow: 3, responsive: [ { breakpoint: 768, settings: { slidesToShow: 2, }, }, { breakpoint: 480, settings: { slidesToShow: 1, }, }, ], };