Reactjs Syncfusion：带有 TabItemsDirective 的选项卡组件不显示任何内容

我实际上是想使用Syncfusion的TabComponent在我的应用程序中有一个很好的Tab，所以我试着使用它，就像他们网站上显示的那样，但什么都没有显示.

我的代码是:

import { TabComponent, TabItemDirective, TabItemsDirective } from '@syncfusion/ej2-react-navigations';

const Tab = (props) => {
    return (
        <div>
            This is written in Tab.js, Tab Component should be here
            <TabComponent id='defaultTab' style={{width: '100%', borderColor:'red'}} overflowMode='Scrollable'>
                <TabItemsDirective>
                    <TabItemDirective header={"Header1"} content={"Content1"} />
                    <TabItemDirective header={"Header2"} content={"Content2"} />
                    <TabItemDirective header={"Header3"} content={"Content3"} />
                </TabItemsDirective>
            </TabComponent>
        </div>
    
    )
}
export default Tab;

但是这并不起作用，"这是用Tab.js编写的，Tab组件应该在这里"正确地显示在呈现中，但是TabComponent表现得好像它根本不存在.

但当我像这样创建TabComponent时:

<TabComponent id='other Tab' style={{width: '100%', borderColor:'red'}} overflowMode='Scrollable'>
     <div className='e-tab-header'>
          <div>Header1</div>
          <div>Header2</div>
     </div>
     <div className='e-content'>
          <div>Content1</div>
          <div>Content2</div>
     </div>
</TabComponent>

像这样，它工作得很好，不幸的是，我更喜欢使用第一种方法，因为它显然对我和我计划使用它的方式更好，所以有人能解释为什么TabItemDirective在这里不起作用吗？