How to scroll messages like in most messengers?

Question

JavaScript

How can I implement message scrolling in such a way that the last message is always visible and the user does not have to scroll down to see it, but if the user decides to read old messages by scrolling up, then his chat would not jump to the new message if did it come?

With the first one, I somehow almost coped by writing the following function:

const positioningScrollbar = (ref) => {
    if (ref.current) {
        ref.current.scrollTop = ref.current.scrollHeight
    }
}

By using the useRef() hook, putting a ref on the message container and thus accessing the DOM element, but how to deal with the second one? Now any new message will drag the user to itself, even if he would not want it.

My code is on codesandbox.io

ps
For some reason, my chat always shows the penultimate message and not the last one, it is also not clear what to do with this, why this happens

Answer 1

https://codesandbox.io/s/winter-sunset-ijr26?file=...