Why Is My Image out of sync with my Text?

Question

I'm attempting to select a random slide from slides on page load, and display it in a hero section of a website.

But, the Image keeps getting out of sync with the Text & Button (e.g. slide 1 text and button, but slide 3 image are displayed), and I have no idea why that would happen?

If slide 1 is the slide, then the image, the text and button should all show slide 1's attributes.

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

Answer 1

The answer to this issue was to move the logic into a useEffect and use useState to track which slide we want to display.

const [slide, setSlide] = useState({
      img: "/slides/1.webp",
      p: "1",
      label: "1",
      alt: "1",
      url: "/1",
    })

useEffect(() => {
 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 randomSlide = slides[Math.floor(Math.random() * slides.length)];
  setSlide(randomSlide)
}, [])