Полоса прокрутки React div начинается снизу + загрузка дополнительных сообщений из базы данных с помощью Redux

Question

Я пытаюсь реализовать бесконечную прокрутку на моей странице личных сообщений. Поэтому, когда пользователь прокручивает вверх (в div), он загружает больше сообщений.

У меня проблема при первой загрузке.

Он загружает все сообщения до того, как произойдет прокрутка.

Есть способ сделать так, чтобы полоса прокрутки начиналась снизу?

Я использую Redux-Saga для загрузки дополнительных сообщений для компонента разговора (loadMoreMessages), и редуктор обновляет состояние messages .

Вот код:

const ConversationComp = (props) => {
    const {
        loadMoreMessages,
        messages
    } = props;

    const ref = useRef(null);

    useLayoutEffect(() => {
        const elem = ref.current;
        if (elem) {
            console.log("scrolling to bottom");
            elem.scrollTop = elem.scrollHeight;
        }
    }, []);

    useEffect(() => {
        console.log("loading more messages");
        loadMoreMessages();
    }, []);


    const onScrollHandler = (e) => {
        const elem = e.target;
        const threshold = 30;
        if (elem.scrollTop < threshold) {
            // reached top
            loadMoreMessages();
        }
    };

    return (
        <div onScroll={onScrollHandler} ref={ref}>
                {
                    messages.map(m => {
                        ...
                    })
                }
        </div>
    );
}

Желаемое поведение:

1. Загрузить первый пакет сообщений
2. полоса прокрутки находится внизу
3. Когда пользователь прокручивает вверх, он загружает больше сообщений

Есть идеи?