In React, why does an onclick event listener on an outer element execute before an inner element's onclick event listener when using addEventListener? – Reactjs

I’m trying to understand the order in which events are being executed in a React application. Given the following sample component, why would I be observing "OUTER ELEMENT" logged before "INNER ELEMENT" when I click on the inner div element?

I can see that the event is in the bubbling phase, so my understanding is that it should propagate from the target element upwards, but I am observing the opposite happen.

Is my understanding incorrect?

export const Test = () => {
    const ref = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const currentRef = ref.current;

        if (!currentRef) {
            return;
        }

        const handler = (e) => {
            console.log("OUTER ELEMENT");
        };

        currentRef.addEventListener("click", handler);

        return () => {
            currentRef.removeEventListener("click", handler);
        };
    });

    return (
        <div ref={ref}>
            <div
                onClick={(event) => {
                    console.log("INNER ELEMENT");
                }}
            >
                INNER
            </div>
            OUTER
        </div>
    );
};