React TreeView DevExtreme not rendering data on init

Question

I am trying to render a TreeView with departments which have some organization structure, meaning each department has a parent. The problem is that sometimes my TreeView renders without any data in it. I can see the console log when rendering, but the function returns nothing, even the HTML structure remains empty. onItemRendered apparently works as the node has an orange color.

One thing I have noticed is that when the tree is "empty" and I click on the node which is descendant of the orange node then it collapses/expands but nothing renders - but if I expand any other root node except the orange one then the tree renders all the data fine.

      <TreeView
        // key={counter}
        items={items}
        dataStructure="plain"
        displayExpr="ouName"
        parentIdExpr="ouParentExternalKey"
        expandedExpr="expanded"
        onItemClick={(tree) => onItemClick(tree)}
        keyExpr="ouExternalKey"
        searchMode={'contains'}
        searchEnabled={true}
        searchExpr={searchExpr}
        selectByClick={false}
        // virtualModeEnabled={true}
        itemRender={(params) => itemRender(params)}
        onItemRendered={(e) => onItemRendered(e)}
        width={400}
      />

  const itemRender = (organization) => {
console.log("Line129", organization);
const organizationHasManager = organization.manager !== null || organization.alternate !== null;
return (
  <div style={{display: 'flex', flexDirection: 'column'}}>
    <div style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}>
      <div>
        <span>{organization.ouCode}</span>
        <span 
          className={`${styles.utvarNazev} utvar_nazev`} 
          style={{marginLeft: '10px'}} 
          onClick={() => onDepartmentTitleClick(organization)}
        >
          {organization.ouName}
        </span>
      </div>
      <Icon
        className='icon_people_expander'
        iconName="People"
        onClick={() => onShowPeopleFromDepartment(organization)}
        style={{ marginLeft: "15px", cursor: "pointer", position: 'relative', top: '5px' }}
      />
    </div>
    {organizationHasManager && 
      <div style={{display: 'flex', flexDirection: 'row'}}>
        {organization.manager && 
          <span style={{whiteSpace: 'nowrap'}} className={styles.spanManager} onClick={() => onManagerClick(organization.manager)}>
            {organization.manager.displayName}
          </span>
        }
        {organization.alternate &&
          <span style={{marginLeft: '10px', whiteSpace: 'nowrap'}} className={styles.spanManager} onClick={() => onAlternateClick(organization.alternate)}>
            {`(${organization.alternate.displayName})`}
          </span>
        }
      </div>
    }
  </div>
);

};