Transition always enter the first transitions

import QtQuick
import QtQuick.Controls
Rectangle {
    id: root
    color: "#000000"
    width: 800
    height: 480
    state: "init"
    states: [
        State {
            name: "welcome"
        },
        State {
            name: "ignon"
        },
        State {
            name: "ignoff"
        }
    ]
    onStateChanged: console.log("onStateChanged", state)
    transitions: [
        Transition {
            to: "welcome"
            ScriptAction {script: console.log("welcome")}
        },
        Transition {
            to: "ignon"
            ScriptAction {script: console.log("ignon")}
        },
        Transition {
            to: "ignoff"
            ScriptAction {script: console.log("ignoff")}
        }
    ]
    Row {
        Button {
            text:"welcome"
            onClicked: root.state = "welcome"
        }
        Button {
            text: "ignon"
            onClicked: root.state = "ignon"
        }
        Button {
            text: "ignoff"
            onClicked: root.state = "ignoff"
        }
    }
}