Как сопоставить данные с помощью TabPanel?

Question

Я не могу заставить ярлыки вкладок ссылаться на правую панель вкладок. Я использую материальный пользовательский интерфейс, и в документации неясно, как манипулировать какими-либо данными. Когда я нажимаю на первую метку, я хочу, чтобы данные с идентификатором 1 отображались на вкладке. Однако ни один из запрошенных элементов не отображается ни на одной из вкладок.

function TabPanel(props) {
    const { children, value, index, ...other } = props;
    return (
      <div
        role="tabpanel"
        hidden={value !== index}
        id={`${index}`}
        aria-labelledby={`${index}`}
        {...other}
      >
        
          <Box p={3}>
            <Typography>{value}</Typography>
          </Box>
        
      </div>
    );
  }
  
  TabPanel.propTypes = {
    children: PropTypes.node,
    index: PropTypes.any.isRequired,
    value: PropTypes.any.isRequired,
  };
  
  function a11yProps(index) {
    return {
      id: `${index}`,
      'aria-controls': `${index}`,
    };
  }

function Jobs(props) {
...
  const tabClasses = tabStyles();
  ...
  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  return (
    ...
      <AppBar position="static" color="default">
        
        <Tabs
          value={value}
          onChange={handleChange}
          indicatorColor="primary"
          textColor="primary"
          variant="scrollable"
          scrollButtons="auto"
          aria-label="scrollable auto tabs example"
        >
          
          {props.jobs.map(e => (
            <Tab label={e.description} {...a11yProps(e.id)} />
          ))}
         
        </Tabs>
      </AppBar>
      {props.jobs.map(e => (
            <TabPanel value={e.role} index={e.id}>
            {e.role}
          </TabPanel>
          ))}
    ...
  );
}
...