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