Aligning Buttons at the Same Line with Tabs in React using Ant Design

I am designing a website, and I need to align buttons and tabs at the same line. When I implement following structure, it does work, but when I add the <Table/> component as children, it does not work.

My first code and its output:

     <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
        <Tabs defaultActiveKey="1" items={[{ label: 'test', key: 'test', children: 'test' }]} />

        <div>
          <Button type="primary" style={{ marginRight: '8px' }}>Add New</Button>
          <Button>Another Button</Button>
        </div>
      </div>

But when I add a table, it is like that:

     <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
        <Tabs defaultActiveKey="1" items={[{ label: 'test', key: 'test', children: <Table/> }]} />

        <div>
          <Button type="primary" style={{ marginRight: '8px' }}>Add New</Button>
          <Button>Another Button</Button>
        </div>
      </div>

How can I fix that problem?