React carbon handling rendering of a combination of dynamic and static tabs

[shiro1]

I have a react carbon component that receives an array of data in a prop. I always have a predefined set of tabs, three of them, and then at the bottom, i want to display a set of dynamic tabs based on the array data.

My tab keys show perfectly but the tab panel values always end up displaying the not found section with the correct selected index and selected tab. I can’t seem to figure out why because the tab index is updated accordingly. Any help/ recommendations will be appreciated.

I have also tried

 const [selectedTab, setSelectedTab] = useState('');
  const [selectedIndex, setSelectedIndex] = useState(0);
  const foundEncounter = visit.encounters.find((enc) => enc.uuid === selectedTab);

  const handleTabChange = (evt) => {
    setSelectedTab(visit.encounters[evt.selectedIndex - 3]?.uuid || ''); // Assuming the first 3 tabs are predefined

    setSelectedIndex(evt.selectedIndex);
  };

 <Tabs
        onChange={handleTabChange}
        selected={selectedIndex}
        className={classNames(styles.verticalTabs, layout === 'tablet' ? styles.tabletTabs : styles.desktopTabs)}
      >
        <TabList aria-label="Visit summary tabs" className={styles.tablist}>
          <Tab id="notes-tab" >{t('notes', 'Notes')} </Tab>
          <Tab className={styles.tab} id="tests-tab">{t('tests', 'Tests')}</Tab>
          <Tab className={styles.tab} id="medications-tab"> {t('medications', 'Medications')}</Tab>
          {showActiveVisitTab ? (
            visit?.encounters?.length > 0 &&
            visit?.encounters.map((enc, ind) => (
              <Tab
                id={'tab-' + ind}
                key={ind}
                className={classNames(styles.tab, styles.bodyLong01)}
              >
                {enc?.form?.display}
              </Tab>
            ))
          ) : (
            <Tab
              className={styles.tab}
              id="encounters-tab"
              disabled={visit?.encounters.length <= 0 && config.disableEmptyTabs}
            >
              {t('encounters_title', 'Encounters')}
            </Tab>
          )}
        </TabList>
        <TabPanels>
          <TabPanel> <NotesSummary notes={notes} /></TabPanel>
          <TabPanel> <TestsSummary patientUuid={patientUuid} encounters={visit?.encounters as Array<Encounter>} /> </TabPanel>
          <TabPanel> <MedicationSummary medications={medications} /> </TabPanel>
          {showActiveVisitTab ? (
            visit?.encounters?.length > 0 &&
            foundEncounter ? (
              <TabPanel>
                <p>test : {visit.encounters.find((enc) => enc.uuid === selectedTab).form.display} : </p>
              </TabPanel>
            ) : (<p> Nothing found  : {selectedIndex} : {selectedTab}</p>)
          ) : (
            <TabPanel>
              <VisitsTable visits={mapEncounters(visit)} showAllEncounters={false} patientUuid={patientUuid} />
            </TabPanel>
          )}
        </TabPanels>
      </Tabs>

My sample visit array data :

{
    "uuid": "1ba6cf9a-082b-4828-b0e4-bc0c8098a4ba",
    "encounters": [
        {
            "uuid": "5faec397-56fa-4245-9283-d665db17a3ce",
            "diagnoses": [],
            "form": {
                "uuid": "60252155-f40d-3084-9d8e-5b7c8fafc68a",
                "display": "Labour & Delivery Form"
            },
            "encounterDatetime": "2023-10-25T10:19:10.000+0300",
            "orders": [],
            "obs": [],
            "encounterType": {
                "uuid": "6dc5308d-27c9-4d49-b16f-2c5e3c759757",
                "display": "Labor and Delivery",
                "viewPrivilege": null,
                "editPrivilege": null
            },
            "encounterProviders": []
        }
    ],
    "visitType": {
        "uuid": "7b0f5697-27e3-40c4-8bae-f4049abfb4ed",
        "name": "Facility Visit",
        "display": "Facility Visit"
    },
    "startDatetime": "2023-10-25T10:19:10.000+0300",
    "stopDatetime": null,
    "patient": {
        "uuid": "47ebc223-5dba-4fb5-9621-c7b3da5c5514",
        "display": "100009C - Mashida za kutafuta",
        "identifiers": [ ],
        "person": {},
        "voided": false,
        "links": [],
        "resourceVersion": "1.8"
    },
    "attributes": []
}