How can I use rx.scroll_area and rx.auto_scroll together?

[ruhz3]

I want to use the scroll_area's UI design, and at the same time, I want this area to scroll automatically when elements are added.
However, it seems that when I wrap rx.scroll_area with rx.auto_scroll (or vice versa), the scroll area doesn't scroll automatically.

To Reproduce

# example from docs : https://reflex.dev/docs/library/dynamic-rendering/auto-scroll#basic-usage
import reflex as rx


class AutoScrollState(rx.State):
    messages: list[str] = ["Initial message"]

    def add_message(self):
        self.messages.append(
            f"New message #{len(self.messages) + 1}"
        )


def auto_scroll_example():
    return rx.vstack(
        # !!! HOW CAN I USE rx.scroll_area's UI? 
        rx.auto_scroll(
            rx.foreach(
                AutoScrollState.messages,
                lambda message: rx.box(
                    message,
                    padding="0.5em",
                    border_bottom="1px solid #eee",
                    width="100%",
                ),
            ),
            height="200px",
            width="300px",
            border="1px solid #ddd",
            border_radius="md",
        ),
        rx.button(
            "Add Message",
            on_click=AutoScrollState.add_message,
        ),
        width="300px",
        align_items="center",
    )