Unable to use Lazy load + Dynamic image manipulation Cloudinary

I am unable to use the feature Cloudinary Lazyload + Dynamic image manipulation both at the same time.

Is there any trick to use both the function at the same time?

I am using an HTML website.

My code is

var cl = cloudinary.Cloudinary.new({cloud_name: "syg"});

// replace 'demo' with your cloud name in the line above

cl.responsive();

</script>

document.addEventListener("DOMContentLoaded", function() {

const imageObserver = new IntersectionObserver((entries, imgObserver) => {

entries.forEach((entry) => {

if (entry.isIntersecting) {

const lazyImage = entry.target

console.log("lazy loading ", lazyImage)

lazyImage.src = lazyImage.dataset.src

}

})

});

const arr = document.querySelectorAll('img.lzy_img')

arr.forEach((v) => {

imageObserver.observe(v);

})

</script>