Dynamic SplitView

Meli

I am new to QML and I want to create a dynamic nested SplitView.
The idea is that

Left click: remove clicked rectangle and create a new SplitView with two rectangle
Right click: remove clicked rectangle

As a result it should look like this

To add a new SplitView my idea was to do it recursive. I tried to do it like this

Splitter.qml

import QtQuick 2.13
import QtQuick.Controls 1.4

SplitView{
    id: splitter
    anchors.fill: parent

    Rectangle{
        id: rect_one
         color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)

         MouseArea{
             anchors.fill: parent
             acceptedButtons: Qt.LeftButton

             onClicked: {
                 splitter.createNewSplit(rect_one);
             }
         }
    }

    Rectangle{
        id: rect_two
         color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)

         MouseArea{
             anchors.fill: parent
             acceptedButtons: Qt.LeftButton

             onClicked: {
                 splitter.createNewSplit(rect_two);
             }
         }
    }

    function setOrientation(horizontal){
        if(horizontal)
        {
            splitter.orientation = Qt.Horizontal
        }
        else{
            splitter.orientation = Qt.Vertical
        }
    }

    function createNewSplit(item){

        splitter.removeItem(item);
        item.destroy();

        var component = Qt.createComponent("Splitter.qml");
        var newItem = component.createObject();

        splitter.addItem(newItem);
        setOrientation(!(Qt.Horizontal == splitter.orientation));
    }
}

This doesn't work.
It would be nice if someone can give me a hint how to achieve this.
Thanks in advance.