// This is how the hidden div looks like in LogViewer.tsx
<div ref={hiddenRowRef} style={{ color: "rgba(255, 255, 255, 0)" }}></div>

// LogViewer.tsx
<AutoSizer
  onResize={() => {
    if (listRef.current !== null)
      listRef.current.resetAfterIndex(0, true);
  }}
>
  {({ height, width }) => {
    return (
      <List
        height={height}
        width={width}
        itemCount={logs.length}
        itemSize={(index) => getItemHeight(logs, index)} // itemHeight in pixels
        itemData={logs}
        ref={listRef as any}
        onScroll={(args) => handleScroll(args)}
      >
        {Row}
      </List>
    );
  }}
</AutoSizer>

// LogViewer.tsx
// Function to get the height of each row in the list.
function getItemHeight(logs: LogLine[], index: number) {
  if (logs[index] === undefined) return 30;
  const { msg, ts } = logs[index];
  const formattedTs = formatDateTimeAMPM(new Date(ts * 1000));
  hiddenRowRef.current!["textContent"] = formattedTs + ": " + msg;
  const hiddenRowHeight = window
    .getComputedStyle(hiddenRowRef.current as Element)
    .getPropertyValue("height")
    .slice(0, -2);
  rowHeightsRef.current.push(Number(hiddenRowHeight));
  return Number(hiddenRowHeight);
}