Stop slider when infinite: false, React-Slick Slide

[suyesnet]

working on a nextjs page.

using react-slick to slide name, categories etc.

when i click next button it still going backward, doesnt stop and creating space. (reference attached image)
This should be stop, when infinite is set to: false.

Inspired from this site to achieve this slider.

my setting. please check setup on Stackblitz

const CategoryScroller = () => { const settings = { dots: false, infinite: false, speed: 500, initialSlide: 0, centerPadding: '0px', variableWidth: true, // Enable variable width nextArrow: <SampleNextArrow className={undefined} style={undefined} onClick={undefined} />, prevArrow: <SamplePrevArrow className={undefined} style={undefined} onClick={undefined} />, responsive: [ ], };

markup

<div className='container'> <div className="slickcont"> <Slider {...settings}> {categories.map((category, index) => ( <div key={index} className="filterChip" style={{ width: 'auto' }}> <a href={category.link}>{category.name}</a> </div> ))} </Slider> </div> </div>