How to switch to the next slide?

Question

css

Hey guys, how do I show the slide whose index is the same as visibleBanner ?
Now it works, but the slides are in place, I would like the active slide to always be in the center

const [visibleBanner, setVisibleBanner] = useState(0);

  const arr = [
    {src: banner},
    {src: banner},
    {src: banner},
  ]

  // Таймаут сладов
  useEffect(() => {
    onHandleSlide();
  }, [visibleBanner]);

  // Следующий слайд
  const onHandleSlide = (idx, click) => {
    if(click) setVisibleBanner(idx);
    else {
      if(visibleBanner !== arr.length) {
        setTimeout(() => {
          setVisibleBanner(visibleBanner + 1);
        }, 5000);
      } else {
        setVisibleBanner(0);
      }
    };
  };

  // Отрисовка слайдера
  const onHandleSliderRender = () => {
    return arr.map((slide, idx) => {
      if(idx === visibleBanner) {
        return (
          <div className="active__slide">
            <img key={idx} src={slide.src} alt="slide" />
          </div>
        )
      }
      if(idx !== visibleBanner) {
        return (
          <div className="overlay" onClick={() => onHandleSlide(idx, true)}>
            <img key={idx} src={slide.src} alt="slide" />
          </div>
        )
      }
      return null;
    })
  };

  return onHandleSliderRender();

That is, now the slide with index 0 should be in the center, please help)