title: Warning: Material-UI: the value provided `3` to the Tabs component is invalid. None of the Tabs children have this value
body: <p>I am using Material UI tabs and Reactjs, both are working fine visually but I realized while using Developer tools that there is an error every time I click on the last tab that I have
  <strong><em>Warning: Material-UI: the value provided `3` to the Tabs component is invalid. None of the Tabs children have this value. You can provide one of the following values: 0, 1, 2, 3.</em></strong> 
  The tabs are generated in a dynamic way, have an array lie this:</p>
  
  <pre><code>const tabs = [
      {
        id: 0,
        title: 'Information',
        component: &lt;EventContaint /&gt;
      },
      {
        id: 1,
        title: 'Attendees',
        component: 'Here attendees list',
        roles: { event: ['owner', 'organizer'] }
      },
      {
        id: 2,
        title: 'Committee',
        component: &lt;EventCommittee /&gt;,
        roles: { event: ['owner'] }
      },
      {
        id: 3,
        title: 'Schedule',
        component: &lt;Schedule /&gt;,
        roles: { event: ['owner', 'organizer'] }
      }
    ];
  </code></pre>
  
  <p>After validating the roles the tab with the id 2 doesn't show (which is ok), but when i click on the Schedule tab the error appears (everything works fine, but I need help to fix this problem that appears on the console)</p>
  
  <pre><code>&lt;Tabs
    value={value}
    onChange={handleChange}
    variant='scrollable'
    scrollButtons='on'
    indicatorColor='secondary'
    textColor='secondary'
  &gt;
    {tabs.map((tab, index) =&gt; (
      &lt;TabWithRoles
        label={tab.title}
        {...a11yProps(index)}
        key={index}
        index={index}
        committee={committee}
        roles={tab.roles}
      /&gt;
    ))}
  &lt;/Tabs&gt;
  </code></pre>
  
  <p>The value and  handleChange are like this:</p>
  
  <pre><code>const [value, setValue] = React.useState(0);
  
  const handleChange = (event, newValue) =&gt; {
    console.log('NEW_VALUE', newValue); // Schedules prints 3, but Committee is not rendered 
    setValue(newValue);
  };
  </code></pre>