Intersection observer not observing

I am trying to observe an element to apply animations on it. I have used intersection observer before but this time for some reason its not working. I am unable to find the issue. Below is my js code

useEffect(() => {


    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {

        entry.target.classList.toggle('show', entry.isIntersecting)
        if (entry.isIntersecting) observer.unobserve(entry.target)

      })

    })
     const boxElList1 = document.querySelectorAll('.Repos');
     boxElList1.forEach((el) => {
      observer.observe(el);

      })
}, [])

Here's the CSS that I'm trying to apply :

 .Repos{
    width: 90%;
    display: grid;
    grid-template-columns: repeat(2, 50vh);
    justify-content: space-evenly;
    transform: translateX(-100px);
    opacity: 0;
  }
 .Repos.show{
    opacity: 1;
    transform: translateX(0);
  }

Below is element that I'm trying to observe:

<div className='Repos'>
            {loading1 ? (
              <div className='loading'>
                <GridLoader color='#4169E1' loading={loading1} size={20} /></div>
            ) : (rep.map(e => {
              return (

                <Repo name={e.name} desc={e.description} lang={e.language} />

              );
            }))}
 </div>