How to show/hide MUI Tabs based on a condition and maintain the right tab index

In my React app, I'm using MUI Tabs and I have to make the tabs to show/hide based if an option is true/false.

My issue is that I'm able to hide the tabs but the tabs index gets a different number of what is it when the tabs are all show. That causes when I click on a tab I see the content of another tab.

I need to understand a better way to achieve my goal as what I'm doing seems wrong.

My code is as follow

conditions on how I should show/hide the tabs

  const isRecruitmentPortal = options.recruitmentPortal;
  const isEngagementPortal = options.engagementPortal;
  const isConsenteesPortal = options.consenteesPortal;

The tabs:

<div className={classes.root}>
      <AppBar className={classes.appBar} position="static" elevation={0}>
        <Toolbar disableGutters>
          <Tabs value={tab} onChange={(e, newValue) => setTab(newValue)}>
            <Tab label="Study Info" />
            <Tab label="Study Tracks" />
            <Tab label="User Admin" />
            <Tab label="Study Locales" />
            {isEngagementPortal && <Tab label="Resources" />}
            {isRecruitmentPortal && <Tab label="Pre-screener" />}
            {isRecruitmentPortal && <Tab label="Consent" />}
            {isRecruitmentPortal && <Tab label="Manuscript" />}
            <Tab label="Survey" />
            {isRecruitmentPortal && <Tab label="Translations" />}
            <Tab label="Sites" />
            {isConsenteesPortal && <Tab label="eConsent" />}
            {isRecruitmentPortal && <Tab label="Reports" />}
          </Tabs>
        </Toolbar>
      </AppBar>
      {console.log(tab)}
      <Grid>
        {tab === 0 && (
          <StudyInfo
            studyId={studyId}
            refetchQueries={refetchQueries}
            setAlert={setAlert}
          />
        )}
        {tab === 1 && <StudyTracks studyId={studyId} />}
        {tab === 2 && <div>USER ADMIN</div>}
        {tab === 3 && (
          <StudyLocales
            setAlert={setAlert}
            studyId={studyId}
            locales={locales}
            currentLocales={currentLocales}
            refetchQueries={refetchQueries}
          />
        )}
        {isEngagementPortal && tab === 4 && (
          <StudyResources studyId={studyId} locales={locales} />
        )}
        {tab === 5 && isRecruitmentPortal && (
          <Questionnaire
            type="PRESCREENER"
            preview
            locales={currentLocales}
            refetchQueries={refetchQueries}
            setAlert={setAlert}
            studyId={studyId}
          />
        )}
        {isRecruitmentPortal && tab === 6 && (
          <Questionnaire
            type="CONSENT"
            locales={currentLocales}
            refetchQueries={refetchQueries}
            setAlert={setAlert}
            studyId={studyId}
          />
        )}
        {isRecruitmentPortal && tab === 7 && (
          <Questionnaire
            type="MANUSCRIPT"
            locales={currentLocales}
            refetchQueries={refetchQueries}
            setAlert={setAlert}
            studyId={studyId}
          />
        )}
        {tab === 8 && (
          <Questionnaire
            type="SURVEY"
            preview
            locales={currentLocales}
            refetchQueries={refetchQueries}
            setAlert={setAlert}
            studyId={studyId}
          />
        )}
        {isRecruitmentPortal && tab === 9 && (
          <StudyTranslation
            studyId={studyId}
            locales={currentLocales}
            refetchQueries={refetchQueries}
            setAlert={setAlert}
          />
        )}
        {tab === 10 && (
          <Sites
            studyId={studyId}
            refetchQueries={refetchQueries}
            setAlert={setAlert}
            locales={locales}
          />
        )}
        {isConsenteesPortal && tab === 11 && <div>E-CONSENT</div>}
        {isRecruitmentPortal && tab === 12 && <Reports studyId={studyId} />}
      </Grid>
      <Alert content={alert} closeDialog={setAlert} />
    </div>
  );