tinymce unable to bind correctly nestedmenuitem - reactjs

Question

I have the following code written and I am not sure why the second level menu items are always the same for each primary level. I know this might be related with scope variables. Can you please suggest an alternative?
``
editor.ui.registry.addMenuButton(insertFields, {
text: My button,
fetch: function (callback) {
var temp = [];
for(var i = 0; i < k.state.ListItems.length; i++)
{
var obj = {};
var fieldItems = k.state.ListItems[i].description;
console.log(fieldItems);
obj["text"] = k.state.ListItems[i].Title;
obj["type"] = "nestedmenuitem";
obj["getSubmenuItems"] = () => {
console.log("fired for submenu");
var getMenuItem = t => {
return {
type: "menuitem",
text: t,
onAction: () => {
editor.insertContent("{{ " + t + "}}");
}
};
};
var nestedItems = [];
for (let k = 0; k < fieldItems.length; k++) {
nestedItems.push(getMenuItem(fieldItems[k].Title ));
}
return nestedItems;
}
temp.push(obj);
console.log(temp);
}
console.log(temp);
var items = temp;
callback(items);
}
});
}
}}
/>

Answer 1

was able to resolve this issue. Not sure if there was a better way.
setup: function (editor) {
for(let i = 0; i < k.state.ListItems.length;i++)
{
// let Fields = k.state.ListItems[i].Fields;
editor.ui.registry.addNestedMenuItem(k.state.ListItems[i].Id, {
text: k.state.ListItems[i].Title,
getSubmenuItems: () => {
var getMenuItem = (t,r) => {
return {
type: "menuitem",
text: t,
onAction: () => {
editor.insertContent("{{" + r +"|" + t + "}}");
}
};
};
var nestedItems = [];
for (let j = 0; j < k.state.ListItems[i].Fields.length; j++) {
// console.log(Fields[j].Title);
nestedItems.push(getMenuItem(k.state.ListItems[i].Fields[j].Title,k.state.ListItems[i].Title));
}
return nestedItems;
}
});
}
}