How to hide button next/prev arrow in react slick

[muamarzidan]

I have been trying like this var settings = { slidesToShow: 4, slidesToScroll: 4, initialSlide: 0, arrows: false, prevArrow: false, nextArrow: false, responsive: [ { breakpoint: 640, settings: { slidesToShow: 2, slidesToScroll: 1, initialSlide: 1 } }, ] };

<section className="w-full h-auto">
        <div className="xl:max-w-7xl lg:max-w-5xl md:max-w-3xl sm:max-w-xl max-w-md sm:px-0 px-5 mx-auto">
            <Slider {...settings} className={`w-full h-auto ${styles.responsiveNew}`}>
                {dataCard.map((item, index) => (
                    <div key={index}>
                        <div className="max-w-[220px] max-h-[300px] flex flex-col items-center"> 
                            <Image src={item.image} alt={item.title} width={220} height={150} className="w-full h-full object-cover rounded-t-lg" />
                            <div className="py-2 px-2 rounded-b-lg border-2 border-blue-800">
                                <h3 className="">{item.title}</h3>
                                <p className="text-sm text-gray-500">{item.date}</p>
                            </div>
                        </div>
                    </div>
                ))}
            </Slider>
        </div>
    </section>

but the button prev is still show, iam using next+tailwind