How to implement closeable dynamic tabs in React DevExtreme with automatic switch to parent tab on close?

Question

enter image description here

I want to implement a tab system in DevExtreme React, where two tabs are static and each tab renders a TreeList component, while additional tabs are dynamically added upon clicking an icon in a row of the TreeList within one of the static tabs? Furthermore, I want these dynamically added tabs to be closeable. After closing a dynamically added tab, I would like to automatically switch back to the parent tab. What would be the recommended approach to achieve this functionality?

You can look at image for understanding.

enter image description here

I dynamically opened a tab and displayed the corresponding data. However, upon closing the tab, it doesn't automatically return to the parent tab. Additionally, when the tab is closed, the tab title disappears(as it should be), but the data associated with it remains visible until another tab title is clicked.

Kindly guide me what i'm doing wrong.

Below is my code

import React, { useCallback, useEffect, useState } from 'react'
import './styles.css'
import PricingTreeList from './PricingTreeList'
import ResourcesTreeList from './ResourcesTreeList'
import { useDispatch, useSelector } from 'react-redux'
import { Sortable } from 'devextreme-react/sortable'
import TabPanel from 'devextreme-react/tab-panel'
import OpenNewTab from './OpenNewTab'
import { removeEstimateById } from '../../../../actions/EstimateActions/EstimateWorksheetAction'

const DynamicTabPanel = () => {
    const [selected, setSelected] = useState('btn1')
    const [content, setContent] = useState(<PricingTreeList />)

    const allWorksheets = useSelector((state) => state.estimateWorksheet.worksheets)
    const pricingTasks = useSelector((state) => state.estimateTask.tasks)
    const pricingResources = useSelector((state) => state.estimateResource.resources)

    const [openedSheets, setOpenedSheets] = useState(allWorksheets)

    const dispatch = useDispatch()
  
    const handleActive = (btn) => {
        setSelected(btn)
        setContent(getContent(btn))
    }
    // * Close Button Handler
    const closeButtonHandler = useCallback(
        (item) => {
            
            if (item && item.length > 0) {
                dispatch(removeEstimateById(item[0].projectId, item[0].taskId))
            } else {
                console.warn('Item is empty');
            }
        },
        [allWorksheets]
    )

    const getContent = (btn) => {
        switch (btn) {
            case 'btn1':
                return <PricingTreeList dataSource={pricingTasks} />
            case 'btn2':
                return <ResourcesTreeList dataSource={pricingResources} />
            case 'btn3':
                return allWorksheets.map((worksheetArray, index) => {
                    if (worksheetArray && worksheetArray.length > 0) {
                        return <OpenNewTab key={index} dataSource={worksheetArray} />
                    } else {
                        return null
                    }
                });

            default:
                return ''
        }
    }

    // * Render Title
    const renderTitle = useCallback((data) => {
        // let alreadyPushed = data.find(elem => elem.taskId).taskId === pricingTasks.find(element => element).id

        return (
            <>
                <div className='position-relative'>
                    <span>WS - New Task</span>
                    {<i
                        className='fal fa-times'
                        id='close-icon'
                        onClick={() => closeButtonHandler(data)}
                    />
                    }
                </div>
            </>
        )
    })

  
    return (
        <div>
            <div className='group-btn'>
                <button
                    type='button'
                    className={`tab-btn ${selected === 'btn1' ? 'active' : ''}`}
                    onClick={() => handleActive('btn1')}
                >
                    Pricing
                </button>
                <button
                    type='button'
                    className={`tab-btn ${selected === 'btn2' ? 'active' : ''}`}
                    onClick={() => handleActive('btn2')}
                >
                    Resources
                </button>

                <div onClick={() => handleActive('btn3')}>
                    {allWorksheets.length === 0 ? null : (
                        <Sortable
                            filter='.dx-tab'
                            data={allWorksheets}
                            itemOrientation='horizontal'
                            dragDirection='horizontal'
                        >
                            <TabPanel
                                dataSource={allWorksheets}
                                id='estimate-tabpanel'
                                itemTitleRender={renderTitle}
                                selectedIndex={-1}
                            ></TabPanel>
                        </Sortable>
                    )}
                </div>
            </div>
            <>{content}</>
        </div>
    )
}

export default DynamicTabPanel