I use antd library for creating a tab section. The problem that I have is to close all tabs that are opened on clicking a button 'close all tabs'. But onClicking each time only last opened tab is being closed.

I have two useStates...focusingPaneKey denotes the tab which is active. openingPaneKeys is an array of all the active tabs.

On clicking the button handleTabsEdit method is called, which again will call closePane method.

const handleTabsEdit = useCallback((key, action) => {
if (action === 'remove') {
  closePane(key)
}
}, [closePane])


const closePane = (paneKey) => {
if (paneKey === focusingPaneKey) {
  const paneKeyIndex = openingPaneKeys.indexOf(paneKey)
  setFocusingPaneKey(openingPaneKeys[paneKeyIndex - 1])
}
setOpeningPaneKeys(openingPaneKeys.filter((openingPaneKey) => 
openingPaneKey !== paneKey))
}


return(
  <Button onClick={() => openingPaneKeys.forEach
  (id => this.handleTabsEdit(id, 'remove'))}>Close All Tabs</Button>
)

 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' },
 }

The main logic lies here in this line which closes the tab.

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

What changes to be done for closing all tabs?