Tekst på billeder i image slideshow

Hej. Jeg har et problem med at få tekst med på mine billeder i min image slider, hvor teksten skifter sammen med billederne.
Jeg har siddet med det længe og kan simpelthen ikke lige finde ud af hvordan jeg skal få tekst med på billederne. Jeg smider lige min kode herunder. Jeg arbejder i React.js.

import './slider.scss'

import Img1 from '../assets/hero2.jpg';
import Img2 from '../assets/fliserensning.jpg';

import { useState, useEffect } from 'react';


const Slider = ({duration = "5000"}) => {

    const [imgArr] = useState([Img1, Img2])
    const [activeIndex, setActiveIndex] = useState(0)

    useEffect(() => {
        var timeout = setTimeout(() => {
           
           
            if (activeIndex < imgArr.length -1) {
                setActiveIndex(activeIndex +1);
            } else {
                setActiveIndex(0)
            }
           
        }, duration);
        return () => {
            clearTimeout(timeout)
        }
    }, [activeIndex]);
   

    return (
        <section className='slider'>
            <ul>
                {
                    imgArr?.map((item, index) => (
                        <li className={index === activeIndex ? "active" : ""} style={{backgroundImage: "url(" + item + ")", animationDuration: duration + "ms" }}>
                            <img hidden alt="hero" src={item}/>                        </li>
                    ))
                }
            </ul>
        </section>
    )
}

export default Slider;