Автоматическое слайд-шоу W3 преобразовано в React (gatsbyjs)

Оригинальный слайдер Javascript есть в школах W3. Я изменил его, чтобы он работал как слайдер на моей домашней странице. Цель состоит в том, чтобы вызвать это в index.js (который работает) и используйте его вверху страницы (что работает), и если я хочу поменять изображение, я могу загрузить slideshow.js, добавьте новое статическое изображение или удалите старое (тоже работает).

Но держу пари, что это не совсем «готово к React», так как многие учебники содержат несколько компонентов и вызовов GraphQL.

Как мне это улучшить?

Ах да, Гэтсби версии 3.0.0 и gatsby-starter-default это база.

import * as React from "react";
import { slideshow_wrapper } from "./slideshow.module.css";
import { StaticImage } from "gatsby-plugin-image";

const SlideShow = () => {
    let myIndex = 0;
    const showNextSlide = () => {
    let i;
    let x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    myIndex++;
    if (myIndex > x.length) {
        myIndex = 1;
    }
    x[myIndex - 1].style.display = "block";
};
React.useEffect(() => {
    showNextSlide()
    const i = setInterval(showNextSlide, 4000);
    return () => clearInterval(i)
}, [])
return (
<div className={slideshow_wrapper}>
    <StaticImage
        src="../../images/slides/home_slider_1.jpg"
        width={1920}
        quality={100}
        formats={["AUTO", "WEBP", "AVIF"]}
        alt="A Gatsby astronaut"
        className="mySlides"
    />
    <StaticImage
        src="../../images/slides/home_slider_2.jpg"
        width={1920}
        quality={100}
        formats={["AUTO", "WEBP", "AVIF"]}
        alt="A Gatsby astronaut"
        className="mySlides"
    />
    </div>
    );
};

export default SlideShow;