Image proportional growth in QML

[A Former User]

Hello, I am developing a flower watering application. The application works as follows. When a seed presses the current water button, this seed changes the picture and goes to the next form.

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

ApplicationWindow {
    id: rootWindow

    visible: true
    visibility: Window.FullScreen

    property real dp: Screen.pixelDensity * 10 * 2.54 / 160

    property int val: 0

    Image {
        fillMode: Image.PreserveAspectCrop
        source: "qrc:/assets/images/bg.png"
        anchors.fill: parent
    }

    ColumnLayout {
        anchors.fill: parent
        spacing: 0


        Rectangle {
            Layout.preferredHeight: 50 * dp
            Layout.preferredWidth: 50 * dp
            Layout.topMargin: 50
            Layout.alignment: Qt.AlignHCenter
            color: "red"
            radius: 100

            Label {
                anchors.centerIn: parent
                color: "#ffffff"
                text: "Water"
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    flowerImage.width = flowerImage.width * 2
                    flowerImage.height = flowerImage.height * 2
                    rootWindow.val =  rootWindow.val + 1

                }
            }

        }

        Item {
            Layout.fillHeight: true
        }


        Image {
            id: flowerImage

            Layout.preferredHeight: 50 * dp
            Layout.preferredWidth: 50 * dp
            Layout.alignment: Qt.AlignCenter
            Layout.bottomMargin: 90

            fillMode: Image.PreserveAspectFit
            source: {
                if(rootWindow.val === 0) {
                    return "qrc:/assets/images/seed.png"
                }
                if(rootWindow.val === 1) {
                    return "qrc:/assets/images/seed1.png"
                }
                if(rootWindow.val === 2) {
                    return "qrc:/assets/images/seed2.png"
                }
                if(rootWindow.val === 3) {
                    return "qrc:/assets/images/seed3.png"
                }
            }

        }
    }
}

This is how it looks when I run the code.

If we click the water button I expect the seed image to change and grow but that doesn't work. The picture changes and eventually the picture grows.

I want the seeds to grow as they are watered and move on to the next form. How can I do this properly?