Cannot apply transitions when using StateGroup in QML

jay1

I am trying to use the states in the QML but when i try to add the StateGroup the transitions are not applied or not visible but the state changes.

The example i tested used to file "Main.qml" and "CustomComponent.qml".
The "Main.qml" contains the customcomponent and button. when a button is pressed the state of the customcomponent is changed.
The states are defined in the "CustomComponent.qml" file.

Am I using the QStateGroup Tag in "CustomComponent.qml" in wrong way ?
Can someone kindly suggest the correct or standard way ?

Main.qml

// ------------------------------File: Main.qml------------------------------------------------
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Window 2.14

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Test Sample")

    CustomComponent
    {
        id: customComp
        width: 50
        height: 50
        x: 50
        y: 50
    }

    Button
    {
        id: button
        width: 150
        height: 150
        x: parent.width/2
        y: 150
        onClicked:
        {
            if(customComp.m_status === 'HIDE')
            {
                button.text = 'SHOW';
                customComp.m_status = 'SHOW';
            }
            else
            {
                button.text = 'HIDE';
                customComp.m_status = 'HIDE';
            }
        }
    }
}

CustomCoponent.qml

import QtQuick 2.14

Item {
    id: root
    property var m_StateNames: ['HIDE', 'SHOW']
    property var m_status: 'HIDE'

    state: m_status

    Rectangle
    {
        id: container
        anchors.fill: parent
        Image {
            id: containerImage
            anchors.fill: parent
            source: "qrc:/images/Hide.png"
        }
    }

    StateGroup
    {
        id: rootStateGroup
        states: [
            State {
                id: hide
                name: 'HIDE'
                when: (root.state == 'SHOW')
                PropertyChanges {
                    target: container;
                    rotation: 360;
                }
                PropertyChanges {
                    target: containerImage;
                    source: "qrc:/images/Hide.png"
                }
            },
            State {
                id: active
               name: 'SHOW'
               when: (root.state == 'HIDE')
               PropertyChanges {
                   target: container;
                   rotation: 360;
               }
               PropertyChanges {
                   target: containerImage;
                   source: "qrc:/images/Show.png"
               }
            }
        ]

        transitions: [
            Transition {
                from: 'HIDE'
                to: 'SHOW'
                ColorAnimation {
                    from: "red"
                    to: "green"
                    duration: 2000
                }
                RotationAnimation {
                    duration: 2000;
                    direction: RotationAnimation.Clockwise
                }

            },
            Transition {
                from: 'SHOW'
                to: 'HIDE'
                ColorAnimation {
                    from: "green"
                    to: "red"
                    duration: 4000
                }
                RotationAnimation {
                    duration: 4000;
                    direction: RotationAnimation.Counterclockwise
                }

            }
        ]
    }

    onStateChanged: rootStateGroup.state = m_status;

}