Image reveal using intersection observer not adding class

Question

I'm using intersection intersection observer to reveal an image using clip-path like this one:

https://codepen.io/Connum/pen/oNYYOgo

But it's not adding the class for

<script>
    const images = document.querySelectorAll('.image');

    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('reveal');
          observer.unobserve(entry.target); // Stop observing once revealed
        }
      });
    }, {
      rootMargin: '0px',
      threshold: 0.5 // Adjust this value to control when the images should start revealing
    });

    images.forEach(image => {
      observer.observe(image);
    });
  </script>

.image {
      display: block;
      opacity: 0;
      clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
      transition: all 0.5s ease;
}
.reveal {
      opacity: 1;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
}

<img alt="" class="BE_image image" contenteditable="false" id="BE_current_image" src="https://s.realtyninja.com/static/media/med/11537_598cf616_pexels-max-rahubovskiy-8134754.jpg" style="opacity: 1;" title="">

But when I remove the clip path in the .image class the reveal class is added