Cleanup for ref used for react-window

.gitignore

@@ -88,3 +88,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 yarn.lock
+
+.vscode

src/Components/NetworkTable/NetworkTableBody.jsx

@@ -58,13 +58,13 @@ const NetworkTableBody = ({ height }) => {
   }, [elementDims]);
 
   useEffect(() => {
-    if (enableAutoScroll && listRef?.current?._outerRef) {
-      const outerRef = listRef?.current?._outerRef;
-      const needToScroll = outerRef.scrollTop +
-        outerRef.offsetHeight +
-        (numberOfNewEntries * TABLE_ENTRY_HEIGHT) >= outerRef.scrollHeight;
+    if (enableAutoScroll && listRef?.current) {
+      const { offsetHeight, scrollHeight } = listRef.current;
+      let { scrollTop } = listRef.current;
+      const needToScroll = scrollTop + offsetHeight +
+        (numberOfNewEntries * TABLE_ENTRY_HEIGHT) >= scrollHeight;
       if (needToScroll) {
-        listRef.current._outerRef.scrollTop = outerRef.scrollHeight;
+        scrollTop = scrollHeight;
       }
     }
   }, [data, listRef]);
@@ -100,7 +100,6 @@ const NetworkTableBody = ({ height }) => {
   return (
     <>
       <FixedSizeList
-        ref={listRef}
         className={Styles['network-table-body']}
         height={height}
         itemCount={data.size}
@@ -111,6 +110,7 @@ const NetworkTableBody = ({ height }) => {
           selectedReqIndex,
         }}
         itemSize={TABLE_ENTRY_HEIGHT}
+        outerRef={listRef}
       >
         {virtualizedTableRow}
       </FixedSizeList>

src/hooks/useResizeObserver.js

@@ -19,7 +19,7 @@ export const useResizeObserver = (elementRef) => {
   });
 
   useEffect(() => {
-    const ref = elementRef?.current?._outerRef || elementRef?.current;
+    const ref = elementRef?.current;
     const onResize = debounce(() => {
       if (ref) {
         setElementDims({
@@ -40,7 +40,7 @@ export const useResizeObserver = (elementRef) => {
         resizeObserver.unobserve(ref);
       }
     };
-  }, [elementRef?.current]);
+  }, [elementRef]);
 
   return { elementDims };
 };