How to disable scrolling provided that the state has not changed?

Question

React

Hello. I implemented a chat, I load 20 messages when scrolling up, when it reaches 0, I scroll down by 20 messages so that the user gets to where he left off. However, I got into a situation that the messages ended, and each time I was thrown back by 20. How to fix it?

prevMessages - additionally loaded messages
messagesBox - element with messages

useEffect(() => {
        if(messagesBox) {
            messagesBox.onscroll = (e) => {
                if(e.target.scrollTop < 1) {
                    e.target.scrollTo(0, e.target.querySelector('.direct-chat-msg:nth-child(20)').offsetTop);
                    const msgID = prevMessages.length ? parseInt(prevMessages[0].id) : parseInt(messages[0].id);
                    socket.emit('getPrevMessages', {roomId, msgID});
                }
                e.preventDefault();
            }
        }
    }, [prevMessages]);

Thank you.