Facing Issue in getOrgChart library ( version - 2.5.3) , field is present in data source but missing in ,render node function, args.node.data

Question

I am using the getOrgChart library (version 2.5.3) for my project, The issue I am facing is that the datasource is getting the proper data but when the renderNod function is called to modify the nodes, there I am not getting one field ( objectiveName) , Can someone please guide me as to why I am facing this issue .

Here's my code and how it is called -

In the ngOninit method, the following function is called, data contains a list of objectives which have various fields, the initMapCustomTheme method creates a custom theme by creating a new instance of getOrgChart , and initMap initializes it, and modifies the fields prese

here's the convertDataToMapFormat method :

convertDataToMapFormat(mapData: any) {
    this.objectivesList = new Array<any>();
    var alignedObjectives = mapData;
    console.log("before for loop ", alignedObjectives);

    if (alignedObjectives.length > 0) {
        alignedObjectives.forEach(objective => {
            this.objectivesList.push(this.BuildNodes(objective));
        });
    }

    while (alignedObjectives.length > 0) {
        var localObjectives = new Array<any>();
        alignedObjectives.forEach(objective => {
            if (objective.childObjectives !== undefined && objective.childObjectives.length > 0) {
                objective.childObjectives.forEach(childObjective => {
                    localObjectives.push(childObjective);
                });
            }
        });
        alignedObjectives = localObjectives;
        alignedObjectives.forEach(objective => {
            objective.ownerProfileImageUrl = this.getStorageProfileUrl(objective.ownerProfileImageUrl);
            this.objectivesList.push(this.BuildNodes(objective));
        });
    }
    console.log("in convert to map method ", this.objectivesList);
}

this method basically extracts out all the objectives and stores the nodes which are created from the BuildNodes method in the objectivesList ,

The following image is of BuildNodes method (fields are part basically fields of objective, important to note is that I am assigning data.name to objectiveName )

the following code is for initCustomTheme method

initMapCustomTheme() {
    this.mapOrientation = getOrgChart.RO_TOP;     // initializing vertical orientation by default;
    getOrgChart.themes.customTheme = {
        size: [525, 200],
        toolbarHeight: 0,
        textPoints: [
            { x: 25, y: 160, width: 400 },
        ],
        textPointsNoImage: [
            { x: 25, y: 160, width: 400 },
        ],
        expandCollapseBtnRadius: 20,
        box: '<rect x="0" y="0" height="290" width="540" rx="3" ry="3" class="org-tree-card"/>',
        objectiveName: '<text width="50" x="100" y="50" class="text-large text-truncate-1 font-weight-600" >[objectiveName]</text>',
    };
}

This is the method initMap

initMap() {
    this.orgChart = new getOrgChart(document.getElementById('org-tree'), {
        theme: 'customTheme',
        primaryFields: ['objectiveName', 'ownerName', 'groupName', 'targetValue', 'progress', 'currentValue', 'initialValue','status'],
        photoFields: ['profileImageUrl'],
        enableEdit: false,
        enableDetailsView: false,
        renderNodeEvent: renderNodHandler,
        orientation: this.mapOrientation,
        dataSource: this.objectivesList,
        levelSeparation: 150,
        siblingSeparation: 60,
        expandToLevel: 200,
        boxSizeInPercentage: { minBoxSize: { width: 1, height: 1 }, boxSize: { width: 25, height: 25 }, maxBoxSize: { width: 40, height: 40 } },
    });

    function renderNodHandler(sender, args) {
        //console.log("sender and args are ", sender, args);
        for (let i = 0; i < args.content.length; i++) {
            if (args.content[i].indexOf('[objectiveName]') !== -1) {
                args.content[i] = args.node.data.objectiveName ? args.content[i].replace('[objectiveName]', args.node.data.objectiveName) : args.content[i].replace('[objectiveName]', 'Not Available');
            }
            if (args.content[i].indexOf('[ownerName]') !== -1) {
                args.content[i] = args.node.data.ownerName ? args.content[i].replace('[ownerName]', args.node.data.ownerName) : args.content[i].replace('[ownerName]', 'Not Available');
            }
            if (args.content[i].indexOf('[groupName]') !== -1) {
                args.content[i] = args.node.data.department ? args.content[i].replace('[groupName]', args.node.data.groupName) : args.content[i].replace('[groupName]', 'Not Available');
            }
        }
        console.log("sender and args are ", sender, args);
    }
}

Here in the sender and args, when I checked - there is no 'objectiveName' field present in args.node.data ( which is assigned from datasource as far as I understood ), and I need that field since it is an important property in my code,

previously, when I had named it as 'name', at that time also another field (ownerName) was missing.

Chrome dev tools data :

this is that convertDataToMap , you can see here it contains the objectiveName in the object.

and This below is the breakpoint when that renderNod function breakpoint will hit , I hope you can see there on the right side is args opened, there in the data fields - it don't have any field named 'onjectiveName' due to which the card is not getting the correct data.

(have removed the unnecessary code and commented code as it was very long, the results were still the same though, so please ignore the extra code you are seeing on the left side.)

Please help me, and is there any documentation available for this version because I couldn't find it anywhere