I have a list of images to display thumbnails. On top of that, for each image, I want to click it to show the image on the full size.

To achieve this, I use Modal and useDisclosure() from @nextui-org/react. Below is my code:

    const { isOpen, onOpen, onOpenChange } = useDisclosure();
                        <Card className="" isPressable onPress={onOpen}>
                            <CardHeader className="flex-col items-start">
                                <p className="text-tiny uppercase font-bold">id:12345678</p>
                                <small className="text-default-500">date:2024-01</small>
                                <h4 className="font-bold text-large">name</h4>
                            </CardHeader>
                            <CardBody className="overflow-visible">
                                {/* <a href="https://www.baidu.com" target="_blank"> */}
                                <Image
                                    alt="Card background"
                                    className="object-cover rounded-xl"
                                    src="/patent/1.png"
                                    height={270}
                                    width={270}
                                />
                                {/* </a> */}
                            </CardBody>
                        </Card>
                        <Modal isOpen={isOpen} onOpenChange={onOpenChange} size="5xl" scrollBehavior="outside" id="modal">
                            <ModalContent>
                                {() => (
                                    <>
                                        <ModalBody>
                                            <Image
                                                alt="Card background"
                                                className="object-cover rounded-xl"
                                                src="/patent/1.png"
                                                height={2000}
                                                width={2000}
                                            />
                                        </ModalBody>
                                    </>
                                )}
                            </ModalContent>
                        </Modal>

My question is, since I have a list of images, whose length is variable. It is not wise or elegant to hard-code a list of corresponding useDisclosure()

How can I auto create useDisclosure for each image?