Реагировать на использование ссылок на динамической панели вкладок

Я использую React, material-ui и material-table.

У меня есть закрываемая панель вкладок. И когда я меняю вкладки, я не отключаю соответствующий компонент панели. Я просто скрываю это с помощью css. Это означает, что когда я использую компонент таблицы материалов внутри нескольких вкладок и хочу получить доступ к текущей таблице ref, я просто получаю ссылку на таблицу, которая находится внутри недавно открытой панели вкладок.

Как я могу обновить ссылку, чтобы она соответствовала текущей таблице панелей, когда я могу открыть вкладку?

Как я думаю, мне следует обновить эту ссылку при событии смены вкладки. Но как я могу это сделать? Использую функциональные компоненты и useRef.

Я безуспешно пытался использовать useCallback

Это мой родительский компонент:

const MainTabPanel = ({
  tabs,
  activeTab,
  setTabs,
  setActiveTab
}) => {

  const tableRef = useRef(null)

  const handleTabClose = (event, tabId) => {
    event.stopPropagation()
    const activeTabIndex = tabs.length > 1 ? tabs.length - 2 : 0
    setActiveTab(activeTabIndex)
    setTabs([
      ...tabs.filter(tab => tab.id !== tabId)
    ])
  }

  const handleTabChange = (event, newValue) => {
    setActiveTab(newValue)
  }

  return (
    <div>
      <TabsToolbar
        tabs={tabs}
        open={open}
        activeTab={activeTab}
        onTabClose={handleTabClose}
        onTabChange={handleTabChange}
      />
      <TableRefProvider value={tableRef}>
        {tabs.map(({ component: Component, id }, index) => (
            <Panel value={activeTab} index={index} key={id} padding={2}>
              <Component />
            </Panel>
          )
        )}
      </TableRefProvider>

    </div>
  )
}

export default MainTabPanel