Estoy tratando de mostrar/ocultar imágenes individuales de una matriz de imágenes según el posicionamiento de altura de desplazamiento en React. La idea es que en cada intervalo se oculte la imagen anterior y se muestre la siguiente.

Hasta ahora he logrado mapear la matriz de imágenes y rastrear la posición de desplazamiento en mi componente de función usando el gancho useEffect, también le he dado accesorios a cada imagen para que tengan un valor de altura mínimo y máximo, luego he escrito una declaración if que verificará si la imagen se encuentra dentro de los criterios. Mi problema parece ser pasar los valores de la altura mínima/máxima a la declaración if y luego mostrar la imagen correcta, o tal vez algo que me he perdido.

 const ScrollingHeader = (props) => { const [imageVisible, setImageVisible] = useState(false); useEffect(() => { window.addEventListener("scroll", showImage); return () => window.removeEventListener("scroll", showImage); }, []) const showImage = (props) => { console.log(window.scrollY); const minHeight = props.minHeight const maxHeight = props.maxHeight if (window.scrollY >= minHeight && window.scrollY <= maxHeight) { setImageVisible(true) } else { setImageVisible(false) } } return ( <TeamImagesWrapper> <TeamSlideContainer> {props.imagesArray.map((images, i) => ( <TeamImageSlide id={i} minHeight={i * 50 - 25} maxHeight={i * 50 + 25}> { imageVisible && <img src={images.image.sizes.src} index={i} /> } </TeamImageSlide> ))} </TeamSlideContainer> <IntroPara>{props.introText}</IntroPara> </TeamImagesWrapper> ) } export default ScrollingHeader