useRef to detect isVisible is not working

I'm trying to add animation to my react div when I scroll and reach the area. I want it to fade in, but the problem is the useEffect to detect the scroll part is not working and I don't know what is wrong with it. Can you guys help me with this?

Here's the code:

My useEffect

    useEffect(() => {
      const handleScroll = () => {
        const element = aboutEncotekiRef.current;
        console.log('element', element);
        if (element) {
          const { top, bottom } = element.getBoundingClientRect();
          const isVisible = top < window.innerHeight && bottom >= 0;
          setIsVisible(isVisible);
          console.log('hello world');
        }
      };
  
      window.addEventListener('scroll', handleScroll);
      return () => {
        window.removeEventListener('scroll', handleScroll);
      };
    }, []);

My div

<div className={`aboutEncoteki ${isVisible ? 'fade-in' : ''}`} ref={aboutEncotekiRef}>
    <Row className='mb-3' lg={12} md={12} sm={12} xs={12}>
        <h1 className = 'FontGothamRoundedBold'>
             Try me
        </h1>
    </Row>
</div>

<s>Just as @nuser137 mentioned, you should remove the dependency array. Your useEffect executes only once.

See: https://css-tricks.com/run-useeffect-only-once/
</s>

Updated answer:

I have been playing with your code in here:

CODEPEN

It looks like it is working as expected.

UPDATE 2:
As suggested in our discussion in the chat, for performance you can use the Intersection Observer API and this code.

From the debugging, seems like there's a wrapper (parent element) around your element that has the scroll and not the window.

Code for Interesection Observer API below:

React.useEffect(() => {
  const handleScroll = (entries) => {
    const isVisible = entries[0].isIntersecting;
    setIsVisible(isVisible);
  };

  const options = {
    root: null, // Use the viewport as the root
    rootMargin: "0px",
    threshold: 0.01, // Adjust the threshold as needed
  };

  const observer = new IntersectionObserver(handleScroll, options);
  const target = aboutEncotekiRef.current;

  if (target) {
    observer.observe(target);
  }

  return () => {
    if (target) {
      observer.unobserve(target);
    }
  };
}, []);

Effects are triggered when the dependency array items changes, so you need to save the scrollTop in a state and add to the array dep of the effect, with this when scroll changes the effect is executed

Here is a working example that works fine. I am not sure what exact problem you were facing but this JS Fiddle works.

https://jsfiddle.net/Bro3Simon/neuhq3ba/9/

function App() {

const [isVisible, setIsVisible] = React.useState(false);

const aboutEncotekiRef= React.useRef();

React.useEffect(() => {
  const handleScroll = () => {
    const element = aboutEncotekiRef.current;

    if (element) {
      const { top, bottom } = element.getBoundingClientRect();
      const isVisible = top < window.innerHeight && bottom >= 0;

      setIsVisible(isVisible);
    }
  };
  
  console.log("I ran on first render only!");
  window.addEventListener('scroll', handleScroll);

  return () => {
    window.removeEventListener('scroll', handleScroll);
  };
}, []);
    
return (
<>
  <div  style={{backgroundColor: isVisible ? "red": "yellow", height: "200vh"}}>{`Is The Second Element Visible : ${isVisible}`}</div>
  
  <div className={`aboutEncoteki ${isVisible ? 'fade-in' : ''}`} ref={aboutEncotekiRef} >
    {`Is Element Visible : ${isVisible}`}
  </div>
</>
  );
}