"style" is undefined or null when I try to hide my arrows in my carrousel

Question

I have a little problem with my carousel, I just try to remove the right and left arrow when there is only one image but when I try to add this code, I have an error that tells me that "style" is undefined or null. I looked for hours but impossible to find the solution. Do you know where it can come from? Thanks.

The carousel :

https://github.com/AxSF3/Projet-11/blob/main/src/components/Carrousel/Carrousel.js

What I tried to add line 28 to the carousel :

const hideArrows = () =>  { 
   if (nombreImg === 1) {
     document.getElementsByClassName('fleche')[0].style.visibility = 'hidden';
   } else {
     document.getElementsByClassName('fleche')[0].style.visibility = 'visible';
   }

        
 }
 hideArrows()

I try to add this code :

const hideArrows = () =>  { 
   if (nombreImg === 1) {
     document.getElementsByClassName('fleche')[0].style.visibility = 'hidden';
   } else {
     document.getElementsByClassName('fleche')[0].style.visibility = 'visible';
   }

        
 }
 hideArrows()