I’m new to React.js and I’m facing a problem while writing a simple slider. How to translate this code into React.js

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!