[Solved]-How to create an image background fade when mapping an array of images with React-Reactjs

The problem is that your .image class set the same z-index and animation properties for all images.

Try to play with set delay like this:

{images.map((image, index) => (
        <img
          id={index}
          className="image"
          src={image}
          style={{
            animationDelay: `${index * 4}s`, // delay animation for next images
            zIndex: `-${index + 1}` // make images as layers, not same layer -1
            }}
        />
      ))}

But if you are using React, you could also try to make it in React by interval and hooks, and animate slides in css by applied class to active slide:

import React, { useRef, useState, useEffect } from "react";
import  "./Hero.css";

const images = [ 
 " https://images.unsplash.com/photo-1470165451736-166cb1cc909d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2552&q=80",

 "https://images.unsplash.com/photo-1537367075546-0529d021d198?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80",
"https://images.unsplash.com/photo-1590064589331-f19edc8bed34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80"
]


function Hero(props) {
const slidePresentationTime = 3000 // after how many ms slide will change - now 3s / 3000ms
const [currentSlide, setCurrentSlide] = useState(0) // value and function to set currrent slide index
const sliderInterval = useRef() // interval ref

useEffect(() => {
  sliderInterval = setInterval(() => {
      setCurrentSlide((currentSlide + 1) % images.length); // change current slide to next slide after 'slidePresentationTime'
    }, slidePresentationTime);

    // cleanup interval when your component will unmount
    return () => {
      clearInterval(sliderInterval)
    }
})

  return (
    <div className="root">
      <div className="content">
        <h1 className="title">Title</h1>
        <div>
          {images.map((image, index) => (
            <img
              id={index}
              key={index}
              className={index === currentSlide ? 'image active' : 'image'}
              src={image}
              style={{
                zIndex: `-${index + 1}`
              }}
            />
          ))}
        </div>
      </div>
    </div>
  );
}


export default Hero;

And here it would be much easier to use transition instead of animation and just change the transition property (opacity) by class.

 //styles

.image {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  transition: opacity 1s ease;
  opacity: 0;
}

.active {
    opacity: 1;
}

Here is demo https://stackblitz.com/edit/react-2dd6iu