Как мне получить компонент с максимальным количеством просмотров из массива в React.js?

У меня есть массив, и я хочу, чтобы, если на экране видно 4 элемента, он возвращал верхний элемент, видимый на экране.

Вы можете ознакомиться с этим видео, чтобы лучше понять интерфейс и проблему.

Текущая настройка:

const ActionResponseAndRequest = ({actions, info, openapi, serverurl, RequestMethods, globalUrl}) => {

 const [ExampleBody, setExampleBody] = useState(actions[0]?.body);
 const [apiResponse, setApiResponse] = useState({});
 const [filteredActions, setFilteredActions] = useState([]);

useEffect(() => {
   if (actions?.length > 0 && filteredActions?.length === 0) {
     setFilteredActions(actions.slice(0, loadAction));
   }
 }, [actions?.length]);

 return(
<div style={{ paddingTop: 20, display: "flex", flexDirection: "column", gap: "10px" }}> 
               {filteredActions.map((action, index) => (
                   <div key={index} style={{ width: "100%", boxSizing: "border-box" }}>
                       <Action
                           id={action.name.replace(/ /g, "-").replace(/_/g, "-")}
                           action={action}
                           index={index}
                           serverurl={serverurl}
                           setApiResponse={setApiResponse}
                           setExampleBody={setExampleBody}
                           globalUrl={globalUrl}
                           info={info}
                           RequestMethods={RequestMethods}
                       />
                   </div>
               ))}
           </div>
)}

const Action = (
   { 
     action, 
     index, 
     serverurl, 
     setApiResponse,
     setExampleBody,
     globalUrl,
     info,
     RequestMethods,
   }, 
 ) => {

 const actionRef = useRef(null);
       const scrollTimeoutRef = useRef(null);
       const [currentActionIndex, setCurrentActionIndex] = useState(0);

       useEffect(() => {
           const observer = new IntersectionObserver(
               throttle((entries) => {
                   let nextSelectedActionIndex = null;

                   entries.forEach((entry) => {
                       if (entry.isIntersecting && currentActionIndex !== index) {
                           nextSelectedActionIndex = index;
                       }
                   });

                   if (scrollTimeoutRef.current) {
                       clearTimeout(scrollTimeoutRef.current);
                   }

                   if (nextSelectedActionIndex !== null) {
                       scrollTimeoutRef.current = setTimeout(() => {
                           // Установить индекс выбранного действия только в том случае, если он изменился
                           if (currentActionIndex !== nextSelectedActionIndex) {
                             const actionId = action.name.replace(/ /g, "-").replace(/_/g, "-");
                             window.history.pushState(null, "", `#${actionId}`);
                             setExampleBody(action?.example_response);
                             setCurrentActionIndex(nextSelectedActionIndex)
                           }
                       }, 300);
                   }
               }, 200),
               { threshold: 0.5 }
           );

           if (actionRef.current) {
               observer.observe(actionRef.current);
           }

           return () => {
               if (actionRef.current) {
                   observer.unobserve(actionRef.current);
               }
               if (scrollTimeoutRef.current) {
                   clearTimeout(scrollTimeoutRef.current);
               }
           };
       }, [index, action]);

       useEffect(() => {
           if (currentActionIndex !== null) {
               const element = document.getElementById(`action-list-${currentActionIndex}`);
               if (element) {
                   element.scrollIntoView({ behavior: "smooth", block: "center" });
               }
           }
       }, [currentActionIndex]);

       return (
         <div
           ref={actionRef}
           id={action.name.replace(/ /g, "-").replace(/_/g, "-")}
           data-index={index}
           key={action.name.replace(/ /g, "-").replace(/_/g, "-")}
           style={{ 
             display: "flex", 
             flexDirection: "row", 
             minHeight: 400,
             borderBottom: "1px solid #494949",
             marginBottom: 30,
             justifyContent: 'center'
           }}
         >
       {/*Код действия */}

       </div>
   )}

Ожидаемый результат:

Предположим, что на экране видно два или более действий одновременно, тогда он должен установить путь URL на имя текущего действия. Например, если на экране видно 4 элемента с индексами от 0 до 3, то текущий видимый элемент должен быть элементом с индексом 0, и если я прокручу вниз и элемент с индексом 0 не будет виден на экране, то он должен установить текущий видимый элемент на индекс 1. Как я могу добиться такого поведения?

Я пытался добиться этого поведения, используя IntersectionObserver, но текущий код возвращает последний элемент, видимый на экране. Также, когда я прокручиваю вниз и прокручиваю вверх, он не устанавливает хэш-URL окна на первый видимый элемент, это абсолютно запутано. На маленьком экране это не работает.