Custom Height in React Slick

Question

I am using react Slick for showing Images in my site. I am using nextjs Image. I have implemented the Slides which looks like this

I tried a lot fit custom height and fit image inside it. But its not working.

Here's my Code:

export default function App() {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    variableWidth: true,
    dots: true
  };
  const imgURLs = [
    "https://images.template.net/wp-content/uploads/2014/11/facebook-cover-photos-nature.jpg",
    "https://i.pinimg.com/originals/61/2d/f7/612df70b3e9204d0f88428a5335f051b.png",
    "http://4.bp.blogspot.com/--vVqnKb8lY0/UPPkQFpSqCI/AAAAAAAAC6g/x0yYlCVrisA/s1600/Facebook-Timeline-Profile-Covers-Nature20.jpg"
  ];
  return (
    <div style={{ display: "flex", gap: "10px", height: "100px" }}>
      <div style={{ width: "60%" }}>
        <Slider {...settings}>
          {imgURLs.map((item, i) => (
            <div
              style={{ width: "100%", height: "100px", position: "relative" }}
              key={i}
            >
              <Image
                unoptimized
                layout="fill"
                src={item}
                alt={"item"}
                quality={100}
              />
            </div>
          ))}
        </Slider>
      </div>
      <div style={{ width: "40%", backgroundColor: "green" }}>Content</div>
    </div>
  );
}

CodeSandBox Link: https://codesandbox.io/s/hardcore-mcclintock-or2618?file=/src/App.js Please Help me with some solutions.