Реагировать-пересечение-наблюдатель inView родительского div, а не указанный ref

Question

У меня есть приложение для реагирования, в котором используются «локомотив-прокрутка» и «реагирующий-перекрестный наблюдатель». В InstallationКомпонент имеет горизонтальную прокрутку с локомотивом-скроллингом. Я хочу посмотреть div'ы .video-gallery'и' .video-box-wrapper ', чтобы сделать некоторую анимацию, как она появляется на экране (путем присвоения разных имен классов). VideoGalleryInView правильно наблюдает за «.video-gallery» и выполняет задуманную мной анимацию. Но это не работает для boxInView, который должен следить за всеми узлами .video-box-wrapper. Мало того, что анимация выполняется одновременно для всех .video-box-wrapper, но и похоже, что она просматривает videoGalleryRef, а не boxRef. Ниже приведен соответствующий код. Любая помощь приветствуется!

      import React, { useState, useRef, useEffect, useCallback } from "react";
import "../styles/Installation.css";
import LocomotiveScroll from 'locomotive-scroll';
import '../../node_modules/locomotive-scroll/src/locomotive-scroll.scss';
import { VideoModal } from './VideoModal';
import { useInView } from 'react-intersection-observer';

function Installation() {
  const [showModal, setShowModal] = useState(false);
  let openModal = () => {
    setShowModal(prev => !prev);
  }
  const installRef = useRef(null);
  const ref = useRef();

  const [videoGalleryInViewRef, videoGalleryInView] = useInView({
    threshold: 0.2
  });

  const [boxInViewRef, boxInView] = useInView({
    threshold: 0.1
  });

  const boxRef = useCallback(
    (node) => {
      ref.current = node;
      boxInViewRef(node);
      console.log('the node: ', node);
    },
    [boxInViewRef],
  );

  const videoGalleryRef = useCallback(
    (node) => {
      ref.current = node;
      videoGalleryInViewRef(node);
    },
    [videoGalleryInViewRef],
  );

  useEffect(() => {
    if(videoGalleryInView) {
      document.querySelector(".navbar-installation").classList.add('navbar-shrink');
    } else {
      document.querySelector(".navbar-installation").classList.remove('navbar-shrink');
    }

  },[videoGalleryInView]);

  useEffect(() => {
    window.scrollTo(0, 0);
    if(installRef){
      var scroll = new LocomotiveScroll({
        el: installRef.current,
        smooth: true,
        direction: "horizontal",
      })
    }
    return () => {
      scroll.destroy();
    }
  }, []);

  return (
    <>
      <VideoModal showModal = {showModal} setShowModal={setShowModal}/>
     
        <div className="installation-container" data-scroll-container ref={installRef} >
          <div className="installation-content">

            <div className="installation-bg" 
              data-scroll
              data-scroll-speed="-10"
              data-scroll-position="left">
            </div>

            <div className="video-instructions">
              <div className="video-instruction-text">
                Video Instructions
                <div className="video-instruction-subtext">
                  Adhesive mounting installation
                </div>
              </div>
            </div>            

            <div className="video-gallery" ref={videoGalleryRef}>
              <div className="video-box-wrapper" id="vid1" onClick={openModal} ref={boxRef}>
                <div className={boxInView ? "video-box reveal-vid" : "video-box hide-vid"}>
                  <img id="vid-thumbnail" src="./productphotos/bathroomcaddy-black.jpg" alt=""/>
                  <div className="product-name">Bathroom Shower Caddy</div>
                  <div className="watch-text">Watch</div>
                  <span className="box-color box-color1"></span>
                </div>
              </div>
              <div className="video-box-wrapper" id="vid2" ref={boxRef}>
                <div className={boxInView ? "video-box reveal-vid" : "video-box hide-vid"}>
                  <img id="vid-thumbnail" src="./productphotos/cornercaddy-black.jpg" alt=""/>
                  <div className="product-name">Bathroom Shower Caddy</div>
                  <div className="watch-text">Watch</div>
                  <span className="box-color box-color2"></span>
                </div>
              </div>   
            </div>
          </div>
        </div>
    </>
  );
}

export default Installation;