There's more...

Now that you're controlling your tabs with state, you can control more aspects of your rendered tabs. For instance, you could add disabled and hidden states to each tab. You could also place an icon property to render in your tab state. Here's a new version of the tabs state:

const [tabs, setTabs] = useState([
  {
    active: true,
    label: 'Home',
    content: 'Home Content',
    icon: <HomeIcon />
  },
  {
    active: false,
    label: 'Settings',
    content: 'Settings Content',
    icon: <SettingsIcon />
  },
  {
    active: false,
    disabled: true,
    label: 'Search',
    content: 'Search Content',
    icon: <SearchIcon />
  },
  {
    active: false,
    hidden: true,
    label: 'Add',
    content: 'AddContent',
    icon: <AddIcon />
  }
]);

Now you have the ability to render disabled tabs that cannot be clicked on—as is the case with the SEARCH tab. You can also hide tabs completely by setting hidden to true—as is the case with the Add tab. Every tab now has an icon as well. Let's see what this looks like when you load the screen:

The icons for every tab are rendered as expected, even for the SEARCH tab, which has been marked as disabled. There's no Add tab because it was marked as hidden. Let's take a look at the changes to the Tabs markup that were necessary to accommodate these new state values:

<Tabs value={active} onChange={onChange}>
  {tabs
    .filter(tab => !tab.hidden)
    .map(tab => (
      <Tab
        key={tab.label}
        disabled={tab.disabled}
        icon={tab.icon}
        label={tab.label}
      />
    ))}
</Tabs>

The disabled and icon properties of Tab are passed directly from the tab in your component state. The filter() call was added to remove tabs that are marked as hidden.