Content Control getting nested in word

I created a project using Office js and word Api 1.3,which loads the Ooxml data of the content controls stored in database into the document. i am facing an issue while loading the Ooxml data which has content controls into document

for example: if i am loading 3 content controls into the document

my requirement is to load content controls one after another in the document

but it loads first content control and inside that second content control and inside that third content control

Code used to store the Ooxml data of the content controls into Database:

// Create a proxy object for the ConentControl body.
var ConentControl = context.document.contentControls.getByTag('FirstControl').getFirst();

// Queue a commmand to get the OOXML contents of the body.
var OOXML = ConentControl.getOoxml(); 

i am storing this OOXML in Database as an xml field

Code used to retrieve

function GetTemplateData() {

    var apiurl = 'Service Url'

    $.ajax({
        url: apiurl,
        type: 'GET',
        dataType: 'json',
        //contentType: 'application/json',
        //data: JSON.stringify(searchDetails),
        async: false,
        success: function (data) {
            $.each(data, function (index, element) {
                var ControlName = element.ControlName;
                var ControlContent = element.ContentData;
                InsertOoxml(ControlName, ControlContent);
             });
         },
        error: function (d) {
            write("Error please try again");
        }
    });
}

function InsertOoxml(ControlName, ControlContent) {
    Word.run(function (context) {

        // Create a proxy object for the content controls collection that contains a specific tag.
        currentOOXML = ControlContent;
        if (currentOOXML != "" && currentOOXML != null) {
            // Create a proxy object for the document body.
            var DocBody = context.document.body;

            // Queue a commmand to insert OOXML in to the beginning of the body.
            DocBody.insertOoxml(currentOOXML, Word.InsertLocation.end);

            // Synchronize the document state by executing the queued commands, 
            // and return a promise to indicate task completion.
            return context.sync().then(function () {

                // Tell the user we succeeded and then clear the message after a 2 second delay
                report.innerText = "Section Loaded succeeded!";
                setTimeout(function () {
                    report.innerText = "";
                }, 2000);
            });
        }
        else {
            return context.sync().then(function () {

                // Tell the user we succeeded and then clear the message after a 2 second delay
                report.innerText = 'Data not available for the control in Database.';
                setTimeout(function () {
                    report.innerText = "";
                }, 2000);
            });
        }
    })
        .catch(function (error) {
            console.log('Error: ' + JSON.stringify(error));
            if (error instanceof OfficeExtension.Error) {
                console.log('Debug info: ' + JSON.stringify(error.debugInfo));
            }
        });
}

Instead of directly inserting a content control, try to first insert a paragraph and then insert the content control.

Here is the code:

var contentControls = context.document.body.insertParagraph("text",Word.InsertLocation.end);
contentControls.insertOoxml(currentOOXML, Word.InsertLocation.replace);

Hope this helps!!!