How to make MouseArea in Loader take effect?

Question

I'm writting a draggable control. This is my minimal reproductive example. My issue is, the hover, click events of Loader and MouseArea cannot take effect at the same time. If I set a bigger z for either of them, the other will have no effect.

Window {
    id: window
    width: 400
    height: 400
    visible: true
    color: "#181818"
    Component {
        id: dele
        Rectangle {
            color: "#1f1f1f"

            Text {
                anchors.centerIn: parent
                text: "hello"
                color: "#cccccc"
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
            }

            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onClicked: console.log(123)
            }
        }
    }

    Loader {
        id: dragTarget
        width: 200
        height: 200
        anchors {
            top: parent.top
            left: parent.left
        }

        sourceComponent: dele
        Drag.active: mouseArea.drag.active
        MouseArea {
            id: mouseArea
            anchors.fill: parent
            hoverEnabled: true
            drag.target: dragTarget
            onContainsMouseChanged: {
                console.log(1234)
            }
        }
        states: [
            State {
                when: mouseArea.drag.active
                AnchorChanges {
                    target: dragTarget
                    anchors {
                        left: undefined
                        top: undefined
                    }
                }
            }
        ]
    }
}

EDIT: I simplified my question. My current problem is that the MouseArea in Loader and the MouseArea in sourceComponent cannot take effect at the same time.