How does 3D object with 2D UI in terms of input event?

Cocos Creator
#1

I’m currently using Cocos 3.6.2
Let me elaborate the problem that I’m facing…

I have 2 canvases:
Canvas_UI with a Ortho projection Camera, priority 0
Canvas_3D with a Perspective projection Camera, priority 10

So anything that rendered by Canvas_3D is in front of Canvas_UI (due to its priority)

I add a Sprite_1 with Button component in Canvas_UI
I add a Sprite_2 with custom raycast collider detection in Canvas_3D
Sprite_2 is semi-overlapping Sprite_1

I noticed Sprite_1 Button component will intercept the raycast event despite it is being rendered behind Sprite_2. Meaning when I click on the overlapping area, Sprite_1 button will always be detected, leaving Sprite_2 receives no click event.

Here’s the codes of raycast detection which I grab from Cocos Creator 3.8 Manual - Input Event System

@ccclass('Clickable')
@requireComponent(Collider)
export class Clickable extends Component {

    private _collider: Collider;
    private _ray: geometry.Ray = new geometry.Ray();

    protected onEnable () {
        input.on(Input.EventType.TOUCH_START, this.onTouchStart, this);
    }

    protected onDisable () {
        input.off(Input.EventType.TOUCH_START, this.onTouchStart, this);
    }

    private get collider() {
        if (!this._collider) {
            this._collider = this.getComponent(Collider);
        }

        return this._collider;
    }

    private onTouchStart (event: EventTouch) {
        const touch = event;
        const cam = CameraManager.instance.gameCam;  // singleton storing Canvas_3D camera
        console.warn('touch', event);

        if (cam) {
            cam.screenPointToRay(touch.getLocationX(), touch.getLocationY(), this._ray);
            if (PhysicsSystem.instance.raycast(this._ray)) {
                const results = PhysicsSystem.instance.raycastResults;
                console.warn(results);
                for (let i = 0; i < results.length; ++i) {
                    const result = results[i];
                    if (result.collider.node === this.collider.node) {
                        console.warn("click!");
                        break;
                    }
                }
            }
        }
    }
}

Please help. How do I achieve/understand the interaction between 2D and 3D projection input event interaction? I want whatever is being rendered in front able to receive the input event first.