If I add or push new value to the item, the padding value becomes strange

[MinhoKang]

Now I'm trying to implement a chat function using virtua.
Two-way infinite scrolling was implemented.
However, when a new message is sent or received, it is added to the existing message, and in this situation, the padding value of each item becomes strange and the location is damaged.

The error image is as follows.

If you look at the developer tool, you can see that the padding value suddenly differs a lot.

The relevant codes are as follows.

I'm creating a chat using a socket, and when I get a message, the handleReceiveMessage works.
In the end, we put a message as a spread operator in the existing message
I'd appreciate it if you could help me with why the problem is happening.

'use client'

import { useRef, useState, useEffect, ReactNode } from 'react'
import { VirtualizerHandle, Virtualizer, VirtualizerProps } from 'virtua'
import { Loader } from '../loader'

interface VirtualListProps<T> extends Omit<VirtualizerProps, 'children'> {
  items: T[]
  children: (item: T, index: number) => React.ReactNode
  isTopHasMore: boolean
  isBottomHasMore: boolean
  loadMoreTop?: () => void
  loadMoreBottom?: () => void
  threshold?: number
  loader?: ReactNode
}

export const VirtualList = <T,>({
  items,
  children,
  loadMoreTop,
  loadMoreBottom,
  threshold = 1000,
  isTopHasMore,
  isBottomHasMore,
  loader = <Loader />,
  ...props
}: VirtualListProps<T>) => {
  const virtualizerRef = useRef<VirtualizerHandle>(null)
  const loadingTimerRef = useRef<NodeJS.Timeout | undefined>(undefined)
  const lastLoadRef = useRef<'top' | 'bottom' | null>(null)

  const [shifting, setShifting] = useState(true)
  const [mounted, setMounted] = useState(false)
  const [isLoading, setIsLoading] = useState(false)

  const handleScroll = async (offset: number) => {
    if (!virtualizerRef.current || isLoading) return

    const scrollSize = virtualizerRef.current.scrollSize
    const isAtTop = offset <= threshold
    const isAtBottom = Math.abs(offset - scrollSize) <= threshold

    // 이전 타이머가 있다면 클리어
    if (loadingTimerRef.current) {
      clearTimeout(loadingTimerRef.current)
    }

    // 디바운스 적용
    loadingTimerRef.current = setTimeout(async () => {
      try {
        // 맨 위에 도달했을 때
        if (
          isAtTop &&
          isTopHasMore &&
          loadMoreTop &&
          lastLoadRef.current !== 'top'
        ) {
          console.log('맨 위 도달, 추가 데이터 로드')
          setShifting(true)
          setIsLoading(true)
          lastLoadRef.current = 'top'
          loadMoreTop()
        }

        // 맨 아래에 도달했을 때
        if (
          isAtBottom &&
          isBottomHasMore &&
          loadMoreBottom &&
          lastLoadRef.current !== 'bottom'
        ) {
          console.log('맨 아래 도달, 추가 데이터 로드')
          setShifting(false)
          setIsLoading(true)
          lastLoadRef.current = 'bottom'
          loadMoreBottom()
        }
      } catch (error) {
        console.error('데이터 로딩 중 에러:', error)
      } finally {
        setIsLoading(false)
        // 로딩이 완료되면 마지막 로드 위치 초기화
        setTimeout(() => {
          lastLoadRef.current = null
        }, 500) // 1초 후에 다시 로드 가능하도록 설정
      }
    }, 100) // 100ms 디바운스
  }

  useEffect(() => {
    setMounted(true)

    // 컴포넌트가 언마운트되면 타이머 클리어
    return () => {
      if (loadingTimerRef.current) {
        clearTimeout(loadingTimerRef.current)
      }
    }
  }, [])

  return (
    <div
      style={{
        height: '100vh',
        overflowY: 'auto',
        overflowAnchor: 'none',
      }}
    >
      {!mounted ? (
        // 마운트 전 로딩 표시
        loader
      ) : (
        <Virtualizer
          ref={virtualizerRef}
          shift={shifting}
          onScrollEnd={() => {
            if (!virtualizerRef.current) return
            const currentOffset = virtualizerRef.current.scrollSize
            handleScroll(currentOffset)
          }}
          onScroll={handleScroll}
          {...props}
        >
          {items.map((item, index) => children(item, index))}
        </Virtualizer>
      )}
    </div>
  )
}

    <VirtualList<TFlattenedMessage>
      items={flattenedMessages}
      loadMoreTop={() => loadMore('up', setDirection)}
      loadMoreBottom={() => loadMore('down', setDirection)}
      isTopHasMore={getIsTopFetchMore(messages)}
      isBottomHasMore={getIsBottomFetchMore(messages)}
      loader={
        <ChattingBubbleSkeleton count={3} className='justify-end h-full' />
      }
    >
      {(message, index) => (
        <MessageItem
          key={index}
          message={message}
          userId={userId}
          roomType={roomType}
          roomId={roomId}
          socket={socket}
          changeReplyMessage={changeReplyMessage}
          unreadCountInfo={unreadCountInfo}
          messageIndex={index}
        />
      )}
    </VirtualList>

const handleReceiveMessage = useCallback(
    (newMessage: Message & { dataDate: string }) => {
      const setNewMessageAndScroll = (
        newMessage: Message & { dataDate: string }
      ) => {
        setNewMessage({ data: newMessage, setMessages })
        setIsScrollAtBottom(true)
        setTimeout(() => {
          scrollToBottom()
        }, 10)
      }
      const myMessage = isSameUser(newMessage.senderInfo.userId, Number(userId))
      const lastMessageInMessages =
        messages.at(-1)?.messages?.at(-1)?.messageId ===
        lastMessageIdRef.current

      if (myMessage) {
        setNewMessageAndScroll(newMessage)
      } else {
        if (isScrollAtBottom) {
          setNewMessageAndScroll(newMessage)
        } else if (lastMessageInMessages) {
          setNewMessageInfo(newMessage)
          setIsShowNewMessageButton(true)
          setMessages((prevMessages) => {
            const newMessages = prevMessages.map((prevMessage) => {
              if (prevMessage.dataDate === newMessage.dataDate) {
                return {
                  ...prevMessage,
                  messages: [...prevMessage.messages, newMessage],
                }
              }
              return prevMessage
            })
            return newMessages
          })
        } else {
          setNewMessageInfo(newMessage)
          setIsShowNewMessageButton(true)
        }
      }

      lastMessageIdRef.current = newMessage.messageId
      if (socket) {
        socket.emit('read_message', {
          roomId,
          messageId: newMessage.messageId,
        })
      }
    },
    [
      socket,
      lastMessageIdRef,
      setNewMessageInfo,
      roomId,
      isScrollAtBottom,
      setIsScrollAtBottom,
      scrollToBottom,
      userId,
      messages,
      setMessages,
    ]
  )

[MinhoKang]

Plus, 'ResizeObserver loop completed with undelivered notifications.' error occur when I scroll...