How do I get a NextUI ListBox to scroll to the last ListItem?

Some background, I’m attempting to create a message chat feed.

I have a NextUI ListBox component that has the property isVirtualized and the appropriate params. It is created using the following:

        <ListboxWrapper>
            <Listbox
                isVirtualized
                aria-label="Dynamic Actions"
                items={chats}
                selectedKeys={selectedKeys}
                selectionMode="single"
                onSelectionChange={setSelectedKeys}
                virtualization={{
                    maxListboxHeight: 600,
                    itemHeight: 40,
                }}
                ref={messagesEndRef}
            >
                {(item) => (
                    <ListboxItem key={item.id}>
                        {item.text}
                    </ListboxItem>
                )}
            </Listbox>
        </ListboxWrapper>

And the ListboxWrapper:

const ListboxWrapper = ({children}) => (
    <div className="grid row-span-6 w-full h-full border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
        {children}
    </div>
);

The items of the list are loaded dynamically. I would like the last item in the list to always be at the bottom of the containing div.

I currently have:

const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({behavior: 'smooth' , block: 'end'})
}

Which scrolls to the top. It doesn’t seem to matter what block I set (end or start), the behaviour is the same. Am I doing something wrong or is there an easier way to do this?

I had the same results with document.getElementById(..).scrollIntoView(..). I also moved the ref to the last list item, but when I do that, the last list item appears at the top of the container and the other items are not visible and cannot be scrolled.

Thanks in advanced!