Describe the bug
I am utilizing "react-multi-carousel" to create four carousels on a single page in Next.js. To render images in these carousels, I make a request to my backend to retrieve image data. I create image items using var1.map... and incorporate them using the <Image> tag in Next.js. However, I am encountering an issue where the items in the carousels are getting mixed up and swapped between the carousels. Interestingly, when I use the standard HTML <img> tag, everything works fine, but the problem arises when I switch to the Next.js <Image> tag. Additionally, this bug does not appear in the development mode, but it manifests after the build process.
Describe the bug I am utilizing "react-multi-carousel" to create four carousels on a single page in Next.js. To render images in these carousels, I make a request to my backend to retrieve image data. I create image items using
var1.map...and incorporate them using the<Image>tag in Next.js. However, I am encountering an issue where the items in the carousels are getting mixed up and swapped between the carousels. Interestingly, when I use the standard HTML<img>tag, everything works fine, but the problem arises when I switch to the Next.js<Image>tag. Additionally, this bug does not appear in the development mode, but it manifests after the build process.