Can I use images from an array in React?

Question

I want to make a slider, but have issues sourcing my images

import { useState } from "react";
import "./styles.css";

function Slider () {

const slides = [
    {url: "slider1.jpg", title: "slider1"},
    {url: "slider2.jpg", title: "slider2"},
    {url: "slider3.jpg", title: "slider3"},
    {url: "slider4.jpg", title: "slider4"},
{url: "slider5.jpg", title: "slider5"}
]

const [currentIndex, setCurrentIndex] = useState(0);

const goToprevious = () => {
    const isFirstSlide = currentIndex === 0;
    const newIndex = isFirstSlide? slides.length - 1 : currentIndex - 1;
    setCurrentIndex(newIndex);
}

const goToNext = () => {
    const isLastSlide = currentIndex === slides.length - 1;
    const newIndex = isLastSlide? 0 : currentIndex + 1;
    setCurrentIndex(newIndex);
}

const goToSlide = (slideIndex) => {
    setCurrentIndex(slideIndex);
}

return(
    <div className="slider"> 
        <div className="rightArray" onClick={goToNext}> &gt; </div>
        <img src= {require(`./../../img/sliders${slides[currentIndex].url}`).default} alt={slides[currentIndex].title} />
        <div className="dots">
            {
                slides.map((slide, slideIndex) => (
                    <div key={slideIndex} onClick={() => goToSlide(slideIndex)}> &#9679; </div>
                ))
                }
        </div>
        <div className="leftArray" onClick={goToprevious}> &lt; </div>
    </div>
);
}

export default Slider;

I've tried different ways but the only one that worked was to use require("./../../img/sliders/slide1.jpg") This one only works for one image, when I write array and variable, I get errors. Would you mind helping me?