React-slick not sliding attimes - react-slick

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;