CenterMode : false is not working

[Shubh-Rajawat]

This is my whole settings object ->

var settings = {
        centerMode: false,
        variableWidth: false,
        dots: false,
        infinite: false,
        wheel: true,
        speed: 500,
        slidesToShow: numSlidesToShow,
        slidesToScroll: 1,
        arrows: newsItems?.length > 4 ? true : false,
        responsive: [
            {
                breakpoint: 1500,
                settings: {
                    slidesToShow: 3,
                }
            },
            {
                breakpoint: 1300,
                settings: {
                    slidesToShow: 3,

                }
            },
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 3,

                }
            },
            {
                breakpoint: 840,
                settings: {
                    slidesToShow: 2.5,
                    slidesToScroll: 1.5,
                }
            },
            {
                breakpoint: 730,
                settings: {
                    slidesToShow: 2.5,
                    slidesToScroll: 1.5,
                }
            },
            {
                breakpoint: 580,
                settings: {
                    slidesToShow: 1.5,
                    slidesToScroll: 1.5
                }
            }
        ]
    };

This is my Slider component ->

{ newsItems ? <Slider { ...settings } ref={ sliderRef } className='flex justify-start' >
                   {
                       newsItems?.map( ( item, index ) => {
                           return (
                               <NewsCard key={ index } data={ item } />
                           )
                       } )

                   }
               </Slider> : "" }

OUTPUT --

Why is the item coming in center when I have set centerMode to false ?????