Empecher la repetition d'un setTimeout()

Salut les gars ,
J'envoie ce message car ça fait 2 jours que je suis que j'essaie de résoudre le problème mais en vain.
En fait j'ai une photo sur mon site que je fait disparaitre au bout de 4 secondes grâce à un setTimeout, elle disparait aussi quand je scroll grâce a un .classList.add et quand je remonte tout en haut du site la photo re apparait.
Le problème c'est que quand je suis en haut su site puis que je scroll et que je remonte au bout de 3 secondes il va envoyer le changement de CSS du premier setTimeout (ce qui la fera disparaitre au bout de 1 seconde) et 4 secondes plus tard celui du 2ème (ce qui ne changera rien car l'image a déjà une opacité de 0.
Donc j'aimerais savoir si je peux bloquer le premier setTimeout une fois que scroll.


Voici le code.



HTML:

<img id="mon-image" src="img/image-1.jpeg">

CSS:

#mon-image{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    border: none;
    margin: auto;
    position: absolute;
}
#mon-image.fondu{
    opacity: 0;
    transition-duration: .5s;
}

JAVASCRIPT:

const image = document.querySelector('#mon-image')
      

 window.addEventListener('scroll', () => {

     if(window.scrollY > 50){
       image.classList.remove('fondu');
         
     }
     else{
       setTimeout(function(){image.classList.add('fondu')}, 4000);
           
      }   
      })