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?

You can use tabBarExtraContent prop of the <Tabs/> component.

import React from 'react';
import './index.css';
import { Button, Table, Tabs } from 'antd';

const App: React.FC = () => {
  return (
    <>
      <Tabs
        tabBarExtraContent={
          <div>
            <Button type="primary" style={{ marginRight: '8px' }}>
              Add New
            </Button>
            <Button>Another Button</Button>
          </div>
        }
        defaultActiveKey="1"
        items={[{ label: 'test', key: 'test', children: <Table /> }]}
      />
    </>
  );
};

export default App;

stackblitz