警告：Material-UI：为Tabs组件提供的值“ 3”无效。 Tabs子项均不具有此值

Question

我正在使用Material UI选项卡和Reactjs，两者在视觉上都可以正常工作，但是我意识到在使用开发人员工具时，每次我单击最后一个选项卡时都会出现错误 警告：Material-UI：为Tabs组件提供的值“ 3”无效。 Tabs子项均不具有此值。您可以提供以下值之一：0、1、2、3。 这些选项卡以动态方式生成，并具有以下数组：

const tabs = [
    {
      id: 0,
      title: 'Information',
      component: <EventContaint />
    },
    {
      id: 1,
      title: 'Attendees',
      component: 'Here attendees list',
      roles: { event: ['owner', 'organizer'] }
    },
    {
      id: 2,
      title: 'Committee',
      component: <EventCommittee />,
      roles: { event: ['owner'] }
    },
    {
      id: 3,
      title: 'Schedule',
      component: <Schedule />,
      roles: { event: ['owner', 'organizer'] }
    }
  ];

在验证角色后，没有显示ID为2的选项卡（可以），但是当我单击“计划”选项卡时，出现错误（一切正常，但是我需要帮助来解决出现在该问题上的问题）控制台）

<Tabs
  value={value}
  onChange={handleChange}
  variant='scrollable'
  scrollButtons='on'
  indicatorColor='secondary'
  textColor='secondary'
>
  {tabs.map((tab, index) => (
    <TabWithRoles
      label={tab.title}
      {...a11yProps(index)}
      key={index}
      index={index}
      committee={committee}
      roles={tab.roles}
    />
  ))}
</Tabs>

值和handleChange像这样：

const [value, setValue] = React.useState(0);

const handleChange = (event, newValue) => {
  console.log('NEW_VALUE', newValue); // Schedules prints 3, but Committee is not rendered 
  setValue(newValue);
};