I am using the material UI tab what my task is I need to show the tab only when it permission is true I am done that part but what if permission come false it will not work it throw an error because of this I am not able to hide tab...

const permission = {
  corp_permission: false,
  user_permission: true
};
export default function LabTabs() {
  const classes = useStyles();
  const [value, setValue] = React.useState("1");

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <div className={classes.root}>
      <TabContext value={value}>
          <TabList onChange={handleChange} aria-label="simple tabs example">
            <Tab label="Item One" value="1" />
            {permission.corp_permission == true && (
              <Tab label="Item Two" value="2" />
            )}
            <Tab label="Item Three" value="3" />
            {permission.user_permission == true && (
              <Tab label="Item Four" value="4" />
            )}
          </TabList>
        <TabPanel value="1">Item One</TabPanel>
        <TabPanel value="2">Item Two</TabPanel>
        <TabPanel value="3">Item Three</TabPanel>
        <TabPanel value="4">Item four</TabPanel>
      </TabContext>
    </div>
  );
}

CodeSandBox Link