React-slick not sliding attimes

Question

I am new to react-slick initially before i added more components to the react-slick, it was sliding seamlessly but after adding in more code in the slider, (something which i think is not the problem) react-slick now slides for some time, and then stops, when refreshed, again it slides, and stops, i have totally failed to understand where the issue could be, below is a sample code

import "./App.css";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

import Slider from "react-slick";

function App() {
  const settings = {
    customPaging: function(i) {
      return(
        <p>{i + 1}</p>
      )
    },
    dots: true,
    infinite: true,
    speed: 1000,
    slidesToShow: 1,
    slidesToScroll: 1,
    adaptiveHeight: true,
    // focusOnSelect: true,
    // lazyLoad: true,
    // swipeToSlide: false
    // fade: true,
    centerMode: true
    // slidesPerRow: 2,
    // rows: 2,
    // arrows: false,
    // draggable: false
  };
  return (
    <Slider {...settings}>
      <div className="box">
        <h3>1 how to make div slider in html and css </h3>
        <h3>1 how to make div slider in html and css </h3>
        <h3>1 how to make div slider in html and css </h3>
      </div>
      <div className="box">
        <h3>2 how to make div slider in html and css </h3>
      </div>
      <div className="box">
        <h3>3 how to make div slider in html and css </h3>
        <h3>1 how to make div slider in html and css </h3>
        <h3>1 how to make div slider in html and css </h3>
        <h3>1 how to make div slider in html and css </h3>
        <h3>1 how to make div slider in html and css </h3>
      </div>
      <div className="box">
        <h3>4 how to make div slider in html and css </h3>
      </div>
      <div className="box">
      <h3>1 how to make div slider in html and css </h3>
        <h3>5 how to make div slider in html and css </h3>
      </div>
      <div className="box">
        <h3>6 how to make div slider in html and css </h3>
      </div>
    </Slider>
  );
}

export default App;