React TreeView DevExtreme not rendering data on init - reactjs

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>
);
};