react-slick library carousel breakpoints do not work on mobile

Question

The project is in nextjs. The code below shows the carousel settings, in which the breakpoints only work in the browser, and on mobile phones, after deployment, the number of elements in the carousel does not change, therefore, the carousel is not mobile responsive.

 const settings = {
    draggable: false,
    pauseOnHover: false,
    swipe: false,
    infinite: true,
    speed: 2000,
    slidesToShow: 4,
    accessibility: true,
    arrows: false,
    autoplay: true,
    autoplaySpeed: 0,
    responsive: [
      {
        breakpoint: 1433,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 1,
        },
      },
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 1,
        },
      },
      {
        breakpoint: 918,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 1,
          initialSlide: 2,
          speed: 1700,
        },
        slidesToScroll: 1,
      },
      {
        breakpoint: 560,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 1,
          speed: 1700,
        },
      },
      {
        breakpoint: 412,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          speed: 1500,
        },
      },
    ],
  };

It is to be expected that on cell phones, the carousel will only have 1 or 2 elements depending on the width of the screen. What happens is that the carousel has 4 elements, the breakpoint does not work for cell phones.