Как переключать слайд на следующий?

Question

[reacter]

Приветствую, ребят, как сделать так, чтобы показывался тот слайд, у которого индекс совпадает с visibleBanner?
Сейчас это работает, но, слайды стоят на месте, хотелось бы, чтобы активный слайд всегда был по центру

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();

То есть, сейчас слайд с индексом 0, должен быть по центру, хелпаните пожалуйста)