I am currently in the process of developing the hero section of my website, and I have implemented a slider effect that is designed to showcase a captivating background image along with a variety of text elements on each individual slider. The slider is functioning flawlessly, transitioning smoothly between different slides without any technical issues. However, I am facing a problem where the background images are not displaying as expected, which detracts from the overall visual appeal of the hero section. I would greatly appreciate your assistance in troubleshooting this issue to ensure that the background images appear correctly. This component is intended to serve as the Hero component for my website, and it plays a crucial role in making a strong first impression on visitors. Thank you very much for your help!

import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import "./Hero.css";

const Hero = () => {
  const sliderSettings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 4000,
    fade: false,
  };

  const slides = [
    {
      backgroundImage:
        "https://m.media-amazon.com/images/I/718aT6EGL4L.__AC_SX300_SY300_QL70_FMwebp_.jpg",
      title: "Welcome to Our Store",
      description: "Find the best deals on the latest products.",
    },
    {
      backgroundImage:
        "https://m.media-amazon.com/images/I/41pTMpnKFhL._AC_UF480,480_SR480,480_.jpg",
      title: "Exclusive Offers",
      description: "Enjoy special discounts and offers only for you.",
    },
    {
      backgroundImage:
        "https://m.media-amazon.com/images/I/81y296p3rdL._AC_UL480_FMwebp_QL65_.jpg",
      title: "New Arrivals",
      description: "Check out the latest additions to our collection.",
    },
  ];

  return (
    <Slider {...sliderSettings} className="hero-slider">
      {slides.map((slide, index) => (
        <div
          key={index}
          className="hero-slide"
          style={{
            backgroundImage: `url(${slide.backgroundImage})`,
            blockSize: "100vh",
            backgroundSize: "cover",
            backgroundPosition: "center",
          }}
        >
          <div className="slide-content">
            <h1>{slide.title}</h1>
            <p>{slide.description}</p>
          </div>
        </div>
      ))}
    </Slider>
  );
};

export default Hero;