I want to add a close button after the tab. That close button should close all the opened tab. How can closing all tabs can be done? There should be a close button at the end of the tabpane the functionality is to close the tabs that are open. How can this be done and what is the functionality to do this action.

Link - https://jsfiddle.net/t5q37nbe/2/

const { Tabs, Button } = antd
const { TabPane } = Tabs

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      focusingPaneKey: '1',
      openingPaneKeys: ['1'],
    }
  }

  openPane = (paneKey) => {
    this.setState(({ ...state }) => {
      if (!state.openingPaneKeys.includes(paneKey)) {
        state.openingPaneKeys = [...state.openingPaneKeys, paneKey]
      }

      state.focusingPaneKey = paneKey
      return state
    })
  }

  closePane = (paneKey) => {
    this.setState(({ ...state }) => {
      if (paneKey === state.focusingPaneKey) {
        const paneKeyIndex = state.openingPaneKeys.indexOf(paneKey)
        state.focusingPaneKey = state.openingPaneKeys[paneKeyIndex - 1]
      }

      state.openingPaneKeys = state.openingPaneKeys.filter((openingPaneKey) => openingPaneKey !== paneKey)

      return state
    })
  }

  handleTabsEdit = (key, action) => {
    if (action === 'remove') {
      this.closePane(key)
    }
  }

  render() {
    const { panes } = this.props
    const keysOfPane = Object.keys(panes)

    return (
      <div className="tab-section">
        <div style={{ marginBottom: 16 }}>
          {keysOfPane.map((key) => (
            <Button key={key} onClick={() => this.openPane(key)}>
              ADD Tab-{key}
            </Button>
          ))}
        </div>
        <Tabs
          hideAdd
          onChange={this.openPane}
          activeKey={this.state.focusingPaneKey}
          type="editable-card"
          onEdit={this.handleTabsEdit}
        >
          {this.state.openingPaneKeys
            .map((key) => panes[key])
            .map((pane) => (
              <TabPane tab={pane.title} key={pane.key}>
                {pane.content}
              </TabPane>
            ))}
            <div><BiWindowClose /></div>
        </Tabs>
      </div>
    )
  }
}

const panes = {
  1: { key: '1', title: 'Tab 1', content: 'Content of Tab Pane 1' },
  2: { key: '2', title: 'Tab 2', content: 'Content of Tab Pane 2' },
  3: { key: '3', title: 'Tab 3', content: 'Content of Tab Pane 3' },
}

ReactDOM.render(<App panes={panes} />, document.getElementById('container'))