CoverFlow effect width 3 slides in react slick

Question

I need to create a slider like the one that is in the image Slick Slider.

1. the first element should be the 3rd slide, active. Other two slides need to be behind the first one on the left side, as shown in the image.
2. On first scroll, the active element should be in center, and the other two slides need to be on either side of the active element
3. On second scroll, the first element alone should be active and show Can anyone please share the sandbox link creating this?

The settings:

const settings = {
                className: "slideTest varWidth",
                infinite: false,
                lazyLoad: true,
                grabCursor: true,
                navigation: true,
                rotate: true,
                speed: 500,
                slidesToShow: 1,
                slidesToScroll: 1,
               // initialSlide: "2",
                variableWidth: true,
                centerMode: true,
                // centerPadding: "-80%",
                nextArrow: <NextArrow />,
                prevArrow: <PrevArrow />,
                beforeChange: (current, next) => setDivIndex(next),
 };

I have 3 div here

Tried,

I tried various combinations, but couldn't achieve the desired result.