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>
);

https://user-images.githubusercontent.com/56718724/129843391-18618c69-809c-42a0-a35c-893e650c9431.mp4