Gatsby StaticImage from array - reactjs

Question

I am trying to make an image slider with React and Gatsby but the images aren't rendering and I get this in console
static-image.server.tsx:51 No data found for image "undefined"
Could not find values for the following props at build time: src
This is my code. When I change the image source to '../images/1.png' instead of images[sliderIndex] the image will show.
const ImageSlider = (props) => {
const [sliderIndex, setSliderIndex] = useState(0);
const images = ['../images/1.png', '../images/2.png']
useEffect(() => {
const sliderLoop = setInterval(() => {
if(sliderIndex+1 > images.length-1) {
setSliderIndex(0)
} else {
setSliderIndex(sliderIndex+1)
}
}, 5000)
return () => clearInterval(sliderLoop)
}, [sliderIndex])
console.log(sliderIndex)
return (
<>
{props.children}
<StaticImage src={images[sliderIndex]} alt=""/>
</>
)
}

Answer 1

<StaticImage /> would only works with a static string, see this part of the docs for more info.
You'd have to use the <GatsbyImage /> component instead & query image data manually, as instructed here. I copied the relevant sample code below.
import { graphql } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"
function BlogPost({ data }) {
const image = getImage(data.blogPost.avatar)
return (
<section>
<h2>{data.blogPost.title}</h2>
<GatsbyImage image={image} alt={data.blogPost.author} />
<p>{data.blogPost.body}</p>
</section>
)
}
export const pageQuery = graphql`
query {
blogPost(id: { eq: $Id }) {
title
body
author
avatar {
childImageSharp {
gatsbyImageData(
width: 200
placeholder: BLURRED
formats: [AUTO, WEBP, AVIF]
)
}
}
}
}
`