Thanks for all the response. I have now resolved it by adding the code below:

{article.mainImage?.url && (
            <NextImage
              src={article.mainImage.url}
              alt={article.title}
              placeholder="blur"
              blurDataURL={
                article.mainImage?.metadata?.lqip?.toString() ?? ""
              }
              fill
              style={{
                objectFit: "cover",
              }}
            />
          )}