Are pointerOn events async?

[Barricature]

I'm trying to rely on pointerOn and pointerOut events to highlight objects. But I noticed that they don't seem to be happening strictly in alternation.

My scene has nested Object3Ds, and each of them listens to pionter events. The idea is to be able to switch the highlight level, so I call event.stopPropagation() if objectLevel === currentLevel and then do the highlight and unhighlight thing. I initial thought is that the event will be captured like this:

So that I the stopPropagation() call will not deal out extra pointerOut events and I can simply turn highlight on and off. I don't know what might be causing one object to be receiving more than one pointerOn or pointerOut event in a row and my guess is that the bubbling happens asynchronously?

The document seems to have suggestions but I don't exacly understand them. If my question is already answered in the doc could I get a little more explanation? Thank you very much!

My implementation is as below: (I fixed the problem by tracking the last intersected object but I don't know if it's the best solution)

    const colorMap = useRef(new Map());
    const selectionSet = useRef(new Set());
    const pointerOn = useRef(null)

    function _findChidren(object, array) {
        if (object.type !== 'Group') {
            return array.push(object);
        }
        if (object.children.length > 0) {
            for (const child of object.children) {
                array.concat(_findChidren(child, array));
            }
        }
        return array;
    }

    function highlightSelection(event) {
        if (
            pointerOn.current === null &&
            event.eventObject.name === curSelect &&
            !selectionSet.current.has(event.eventObject)
        ) {
            pointerOn.current = event.eventObject.id;
            event.stopPropagation();
            const children = _findChidren(event.eventObject, []);
            children.forEach((geometry) => {
                colorMap.current.set(
                    geometry.id,
                    geometry.material.color.getHex()
                );
                geometry.material.color.setHex(HIGHLIGHT_COLOR);
            });
        }
    }

    function unhighlightSelection(event) {
        if (
            event.eventObject.id === pointerOn.current &&
            event.eventObject.name === curSelect &&
            !selectionSet.current.has(event.eventObject)
        ) {
            pointerOn.current = null;
            event.stopPropagation();
            const children = _findChidren(event.eventObject, []);
            children.forEach((geometry) => {
                geometry.material.color.setHex(
                    colorMap.current.get(geometry.id)
                );
                colorMap.current.delete(geometry.id);
            });
        }
    }