how to make reusable material UI tabs component - react

Question

I am working on a react project and I divided some of the pages into tabs using MUI Tab component so I can have multiple components in one page and render each component accordingly so have created the Tabs component however I can only see one first index tab , thanks

reusable tab mui component : -

export default function useTabs(props) {
  const { children, value, index, label, ...other } = props;

  const [selectedValue, setSelectedValue] = React.useState(0);

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

  return (
    <Box sx={{ width: "100%" }}>
      <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
        <Tabs
          value={selectedValue}
          onChange={handleChange}
          className={classes.tab}
          textColor="primary"
          indicatorColor="primary"
        >
          <Tab label={label} {...a11yProps(0)} className={classes.tabText} />
          {/* <Tab className={classes.tabText} label={label} {...a11yProps(1)} /> */}
        </Tabs>
      </Box>
      <TabPanel value={selectedValue} index={index}>
        {children} // rendering tab children here but getting only the first component
      </TabPanel>
    </Box>
  );
}

here is how I am using it :-

//import the reusable component
import Tab from "../common/Tabs";
export default function JobsRecruitments() {
return (
<>
<Tab label="tab name" index={0}> 
<MyComponent />
</Tab>
</>
)
}