Отправка JSX в массив

Итак, я рекурсивно просматриваю свои вложенные объекты, перемещая пункты меню в меню, которое я создал, как показывает этот код:

let menu = [];
this.createDropDown(menu, objects)
return(menu);

createDropDown = (menu, objects) => {
if (Object.keys(objects).length === 1){
  menu.push(
  <Menu.Item key = {Object.keys(objects)}>{Object.keys(objects)}</Menu.Item>
  );
}else{
  for(var k in objects){
    menu.push(<Menu.Item key = {Object.keys(objects[k])}>{k}</Menu.Item>,
    <SubMenu>{this.createDropDown(menu, objects[k])}</SubMenu>);
  }
}
}

Созданное мной меню возвращается в рендер:

render(
     return(
      <Menu onClick = {handleClick} style = {{ width: 256 }} mode = "vertical">
      {this.createMenu()}
      </Menu>
    );
)

Пользовательский интерфейс выводит огромный беспорядок, я пробовал это напрямую с помощью return () (без создания меню и нажатия на него, но я не могу перебирать все объекты, поскольку процесс завершается с первым «Object.keys (objects) .length === 1 "обнаружено), и он отобразил элементы и подменю. Есть идеи, почему React это делает?