Achieving desired look for carousel using react-slick

Question

In the image below is desired look for carousel. I am working in React and I installed react-slick library for this. I am kind of struggling to achieve this look.

This is code of my slider component:

import React from "react";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";
import "./SlickSlider.css";
import rightArrow from "../../images-icons/png/right.png";
import leftArrow from "../../images-icons/png/Vector.png";

export default function SlickSlider({ images }) {
  const settings = {
    className: "center",
    centerMode: true,
    infinite: true,
    centerPadding: "0",
    slidesToShow: 3,
    speed: 500,
    arrows: true,
    dots: true,
    slidesToScroll: 1,
    responsive: [
      {
        breakpoint: 700,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          initialSlide: 1,
          centerMode: false,
        },
      },
      {
        breakpoint: 1300,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 1,
          infinite: true,
          dots: true,
          centerMode: false,
        },
      },
    ],
    nextArrow: (
      <div>
        <div className="next-slick-arrow">
          <img src={rightArrow} className="my-arrow" />
        </div>
      </div>
    ),
    prevArrow: (
      <div>
        <div className="prev-slick-arrow ">
          <img src={leftArrow} className="my-arrow" />
        </div>
      </div>
    ),
  };
  return (
    <div className="slider-container">
      <Slider {...settings}>
        {images.map((image) => (
          <div className="image-wrapper" key={image.id}>
            <img src={image.path} alt="property" />
          </div>
        ))}
      </Slider>
    </div>
  );
}

And css (I left out unimportant stuff):

.slider-container {
  width: 100%;
  margin: 0 auto;
}

.slick-slide img {
  height: 400px;
  width: 100%;
  object-fit: cover;
  margin: auto;
  transition: transform 0.3s ease;
}

.image-wrapper {
  width: 90% !important;
  position: relative;
  display: inline-block;
}

@media (min-width: 1300px) {
  .slick-center.slick-current .image-wrapper::before,
  .image-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(18, 20, 46, 0);
    z-index: 1;
  }

  .slick-slide.slick-center img {
    transform: scale(1.2) !important;
  }


}

.image-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(18, 20, 46, 0.68);
  z-index: 1;
}

So, currently I am showing 3 slides in bigger screens, I gave image-wrapper width of 90% because otherwise images overlap one another on the sides.

Do you have any tips on how to achieve this look for carousel, or maybe it would be better to use another library? Thanks in advance!