Reactjs 如何在React中独立选择多个选项卡

我有一个对象数组，我们称之为tabItems，每个元素中都有一个嵌套的选项数组。 我希望用户能够选择选项卡restaurant_A、restaurant_B、restaurant_C、restaurant_D、， 独立，但选择一个选项时，也会选择合作伙伴选项

import React, { useState } from 'react';
import { Tabs, Tab } from '@material-ui/core';

const tabItems = [
  {
    item: 'day1Lunch',
    options: ['restaurant_A', 'restaurant_B']
  },
  {
    item: 'day1Dinner',
    options: ['restaurant_C', 'restaurant_D']
  }
];

const TabsInfo = () => {
  const [tabValue, setTabValue] = useState(0);
  const handleTabs = (e, val) => setTabValue(val);

  const TabPanel = ({ children, tabValue, tabIndex }) => {
    return <>{tabValue === tabIndex && children}</>;
  };

  return (
    <>
      {tabItems.map(tabItem => (
        <Tabs value={tabValue} onChange={handleTabs}>
          {tabItem.options.map(option => (
            <Tab label={option} />
          ))}
        </Tabs>

        <TabPanel>....</TabPanel>
      ))}
    </>
  );
};

export default TabsInfo;

import React，{useState}来自“React”；
从“@material ui/core”导入{Tabs，Tab}”；
常量选项卡项=[
{
项目：“day1Lunch”，
选项：[‘餐厅A’、‘餐厅B’]
},
{
项目：“day1Dinner”，
选项：[“餐厅C”、“餐厅D”]
}
];
常量TabsInfo=（）=>{
常量[tabValue，setTabValue]=useState（0）；
常量handleTabs=（e，val）=>setTabValue（val）；
const TabPanel=（{children，tabValue，tabIndex}）=>{
返回{tabValue==tabIndex&&children}；
};
返回(
{tabItems.map（tabItem=>(
{tabItem.options.map（option=>(
))}
....
))}
);
};
导出默认TabsInfo；

我不知道如何将选项解耦。。。我有一种直觉，我可以将tabValue转换为 对象，然后使用动态键捕获已选择的选项，但我不知道如何执行

这是问题的代码