Проблема с отображением контейнера вкладок

Question

Я создаю приложение, используя компоненты ui5 we. Здесь я подготовил контейнер вкладок.

      const App = () =>{

const [aSelectedTab, setSelectedTab] = useState<string[]>([]);

 

const prepareTabData = (oGroupField) => {
//It's return a component which contains a table, Form, backend calls
};

const renderSelectedTab = (oEvent) => {
setSelectedTab((aSelectedTab) => [...aSelectedTab, oEvent.detail.tab.dataset.id]);
};

return (
<TabContainer onTabSelect={renderSelectedTab}>
{aGroupFields.map((oGroupField) => (
<Tab data-id={oGroupField.field_name} text={oGroupField.field_name}>
{aSelectedTab.includes(oGroupField.field_name) &&
<Fragment>{prepareTabData(oGroupField)}</Fragment>
}
</Tab>
))}
</TabContainer>
);
}

На каждой вкладке есть таблица с большим объемом данных, поэтому я решил загружать таблицу только по запросу. устранены отходы рендеринга и рендеринг компонентов только по запросу это дает лучшую производительность. Но у меня проблема. То есть после того, как я добавляю контент на одну вкладку и перехожу на другую вкладку и добавляю контент, там также возвращаются данные на предыдущей вкладке. Как решить эту проблему для быстрого рендеринга?