Failed to reference images using nextjs image component

Questions and Answers
3

hello @Meher_Chandan thank you for taking the time to check out my errors but I still got an error after trying out your input & this is the feedback I got

TypeError: Cannot read properties of undefined (reading '0')

my goal is to display images from Cloudinary as shown in my code below.
I highly appreciate your input on this.

{photos.map(photo => (
                        <div key={photo.id} className="flex flex-col">
                            <Link href={`gallery/${photo.id}`}>
                                <a>
                                    <Image
                                        alt={photo.attributes.title}
                                        src={photo.data[0].attributes.file.data.attributes.formats.medium.url}
                                        width={photo.attributes.width}
                                        height={photo.attributes.height} 
                                    />