Как при использовании библиотеки react-intersection-observer передать данные в другой компонент

Как при использовании библиотеки react-intersection-observer передать данные в другой компонент. вот основной компонент

const BurgerIngredients = () => {

  const { bunsRef, inViewBuns } = useInView({ threshold: 0 });
  const { saucesRef, inViewSauces } = useInView({ threshold: 0 });
  const { mainsRef, inViewMains } = useInView({ threshold: 0 });

  useEffect(() => {
    if (inViewBuns) {
      dispatch(setCurrentTab('buns'))
    } else if (inViewSauces) {
      dispatch(setCurrentTab('sauces'))
    } else if (inViewMains) {
      dispatch(setCurrentTab('mains'))
    }
  })

  return (
      <section className={`${styles.burgerIngredients} pt-10 mr-10`}>
        <h1 className='text text_type_main-large pb-5'>Соберите булку</h1>
        <Tabs />  // ЗДЕСЬ НАХОДЯТСЯ КНОПКИ ПЕРЕКЛЮЧЕНИЯ, КОТОРЫЕ ДОЛЖНЫ ПЕРЕКЛЮЧАТЬСЯ ПРИ ПРОКРУТКЕ, КОГДА ДО ХОДЯТ ДО ОДНОГО ИЗ IngredientsItemsList
        <div className={`${styles.burgerIngredients__cardsWrapper} mt-10`}>
          <IngredientsItemsList 
            title="Булки"
            titleId="buns"
            ingredients={buns}
            ref={bunsRef}
          />
          <IngredientsItemsList 
            title="Соусы"
            titleId="sauces"
            ingredients={sauces}
            ref={saucesRef}
          />
          <IngredientsItemsList 
            title="Начинки"
            titleId="mains"
            ingredients={mains}
            ref={mainsRef}
          />
        </div>
      </section>
  );
};

Вот сам компонент с кнопками переключения, в нем я уже реализовал прокрутку до определенного IngredientsItemsList по клику на определенную кнопку, теперь нужно сделать наоборот, подсвечивать кнопкой, при попадания в область видимости определенного IngredientsItemsList

const Tabs = () => { 
  const currentTab = useSelector(store => store.initialIngredients.currentTab) 
  const dispatch = useDispatch();
  
  const handleScroll = (currentTab) => {
    dispatch(setCurrentTab(currentTab))
    document.getElementById(currentTab).scrollIntoView({behavior: "smooth"})
  }

  return(
    <div className={styles.tabList}>
      <a className={styles.tab}><Tab value="buns" active={currentTab === 'buns'} 
        onClick={(value) => {handleScroll(value)}}>Булки</Tab></a>
      <a className={styles.tab}><Tab value="sauces" active={currentTab === 'sauces'} 
        onClick={(value) => {handleScroll(value)}}>Соусы</Tab></a>
      <a className={styles.tab}><Tab value="mains" active={currentTab === 'mains'} 
        onClick={(value) => {handleScroll(value)}}>Начинки</Tab></a>
    </div>
  )
}