How to change viewport from browser window to my declared component when using react-intersection-observer?

Question

I am using react-intersection-observer. I am trying to change bar color from orange to purple only when the bar comes inside the green box as shown in the image below.

i.e I am trying to change my viewport from the browser window to the green box.

Here is the image:

Here is my code:

App.js

import React, { Component } from 'react';
import { useRef, useEffect } from 'react';
import './App.css';

const App = () => {


  useEffect(() => {
    const bars = document.querySelectorAll('.Bar');

    const observer = new IntersectionObserver(entries => {

       entries.forEach(entry => {
         entry.target.classList.toggle('Show', entry.isIntersecting);
       })
    },{
      //root: document.querySelectorAll('.Small'),    
      rootMargin:'-250px'      
    }
    )
    bars.forEach(bar => {
      observer.observe(bar);
    })


  }, [])



  return (
    <div className='App'>
      <div className='Small'></div>  //I want this to be my viewport
      <div className='Bar'></div>
      <div className='Bar'></div>
      <div className='Bar'></div>
      <div className='Bar'></div>
      <div className='Bar'></div>
      <div className='Bar'></div>
      <div className='Bar'></div>
      <div className='Bar'></div>
      <div className='Bar'></div>
      <div className='Bar'></div>
      <div className='Bar'></div>
      <div className='Bar'></div>
      <div className='Bar'></div>
      <div className='Bar'></div>
      <div className='Bar'></div>
    </div>
  )
}


export default App;

App.css

.App {
  text-align: center;
  scroll-snap-type: x mandatory;
  overflow: auto;
  display: flex;
  flex-direction: row;
}

.Small{
  border: 2px solid green;
  width:80px;
  height: 300px;
  flex-shrink: 0;
  position: fixed;
  left: 45%;
  background: transparent;

}

.Bar{
  background-color: orange;
  height: 200px;
  width: 60px;
  margin: 50px;
  flex-shrink: 0;
  scroll-snap-align: center;
  border: 2px solid orange;
  border-radius: 30px;
}

.Show{
  background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(86,9,121,1) 100%, rgba(0,212,255,1) 100%);
}

I saw in the documentation that root is responsible for viewport, but when i added root: document.querySelectorAll('.Small') and commented out rootMargin:'-250px' everything disappeared from my screen.

Please guide me on how I could change my viewport. Please let me know if more information is required.