Performing a simple transformation Qt Quick app

I'm trying to practice this transformation section.
I attached four images to the program and here are:
ClickableImage.qml:

Code:

---

import QtQuick 2.6
 
Image {
    id: root
    signal clicked
 
    MouseArea
    {
        anchors.fill: parent
        onClicked: root.clicked
    }
}

---

Transformation.qml:

Code:

---

import QtQuick 2.6
 
Item {
    width: bg.width
    height: bg.height
 
    Image {
        id: bg
        source: "/background.png"
    }
 
    MouseArea {
        id: backgroundClicker
        anchors.fill: parent
        onClicked: {
            circle.x = 84
            box.rotation = 0
            triangle.rotation = 0
            triangle.scale = 1.0
        }
    }
 
    ClickableImage {
        id: circle
        x: 84; y: 68
        source: "/circle_blue.png"
        antialiasing: true
        onClicked: x += 20
    }
 
    ClickableImage {
        id: box
        x: 164; y: 68
        source: "/box_green.png"
        antialiasing: true
        onClicked: rotation += 15
    }
 
    ClickableImage {
        id: triangle
        x: 248; y: 68
        source: "/triangle_red.png"
        antialiasing: true
        onClicked: {
            rotation += 15
            scale += 0.05
        }
    }
 
    function _test_transformed() {
        circle.x += 20
        box.rotation = 15
        triangle.scale = 1.2
        triangle.rotation = -15
    }
 
    function _test_overlap() {
        circle.x += 40
        box.rotation = 15
        triangle.scale = 2.0
        triangle.rotation = 45
    }
 
}

---

main.qml:

Code:

---

import QtQuick 2.6
import QtQuick.Window 2.2
 
Window {
    visible: true
    width: 800
    height: 600
    title: qsTr("Transformation")
 
    Transformation {
        id: transformation
    }
}

---

When I run the program it shows the images, but nothing happens when I click on any of them! Why please?
And how to use all advantages of Transformation.qml file in main.qml, please?