Render glitches when scrolling down

[vincentsartoko]

I'm making a chat app, but the list jitters when I reach the bottom. Each of the item has dynamic height and width. Here's my code:

React list:
<ReactList itemRenderer={MsgRenderer} length={messages.length} type="variable" />

MsgRenderer:

return (
    <div key={key} className={`chat-box-msg${messages[index].type}`}>
        <span>{messages[index].content}</span>
        <span className="chat-box-msg-ts text-07 text-gray-2">
            {FormatAMPM(messages[index].timestamp)}

            {/* Status when sending */}
            {messages[index].type === 1 && <>&nbsp;&nbsp;{statusSymbols[messages[index].status]}</>}
        </span>
    </div>
);

My.Video.mp4