Estoy intentando seleccionar una diapositiva aleatoria de las slides en la carga de la página y mostrarla en una sección principal de un sitio web.

Pero, la imagen sigue desincronizándose con el texto y el botón (por ejemplo, el texto y el botón de la diapositiva 1, pero se muestra la imagen de la diapositiva 3), y no tengo idea de por qué sucedería eso.

Si la diapositiva 1 es la diapositiva, entonces la imagen, el texto y el botón deben mostrar los atributos de la diapositiva 1.

 export default function Slide() { const router = useRouter(); const slides = [ { img: "/slides/1.webp", p: "1", label: "1", alt: "1", url: "/1", }, ...2,...3,...4 // As above but slide 2,3,4 ]; const slide = slides[Math.floor(Math.random() * slides.length)]; return ( <Flex w="full" h="100%"> <Flex direction={{ base: "column", lg: "row" }} justify={{ base: "center", lg: "center" }} align="center" flex="none" boxSize="full" > <Flex mt={{ base: "4", lg: "0" }} w={{ base: "90%", lg: "30%" }} direction="column" justify="center" align={{ base: "center", lg: "start" }} order={{ base: 2, lg: 1 }} > <Text color="white" fontSize={{ base: "2xl", lg: "5xl" }} fontWeight="black" fontStyle="italic" casing="uppercase" textAlign={{ base: "center", lg: "left" }} lineHeight="short" > {slide.p} </Text> <Button size="lg" mt="8" color="white" backgroundColor="ss.orange" _hover={{ bg: "#CB2106" }} fontWeight="bold" rounded="none" onClick={() => router.push(slide.url)} > {slide.label} </Button> </Flex> <Flex w={{ base: "90%", lg: "50%" }} justify={{ base: "center", lg: "end" }} order={{ base: 1, lg: 2 }} > <Image width={800} height={500} layout="intrinsic" src={slide.img} alt={slide.alt} placeholder="blur" blurDataURL={slide.img} priority /> </Flex> </Flex> </Flex> ); }