I am using nextjs's Image component but the placeholder blur is not working any idea why , I am getting the images from my firebase db and then displaying them

 <SwiperSlide key={index} className="!text-white relative">
              <div className="absolute inset-0">
                <Image
                  // @ts-ignore
                  src={img}
                  alt={`Image ${index + 1}`}
                  layout="fill"
                  objectFit="cover"
                  placeholder="blur"
                />
              </div>
            </SwiperSlide>