A tab bar whose tabs are created from a JSON file and each of these tabs must have its own components

Question

I want to create a tab bar that has tabs from a JSON file, and each of these tabs must have its own components. I used Reat-Tabs and made it as follows. But each panel is not shown `

import React, { useState } from "react";
import "./toolbar.css";
import ToolbarData from "./toolbar.json";
import { makeStyles } from "@material-ui/core/styles";
import {Tabs,Tab,TabList,TabPanel} from "react-tabs";
import styled from "styled-components";
const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper,
  },
}));

const ToolBar = (props) => {
  const classes = useStyles();
  const [key,setkey] =useState(0)
  const isActive = (id) => {
    return key === id;
  };
  const className = isActive ? 'active' : '';
  const handleActive = (key) => {
    setkey(key);
  };
  const CustomTab = ({ children }) => (
    <Tab>
      <div>{children}</div>
    </Tab>
  );
   
  CustomTab.tabsRole = 'Tab';
   const CustomTabPanel = ({ children, myCustomProp, ...otherProps }) => (
    <TabPanel {...otherProps}>
      <div>{children}</div>
      {myCustomProp && `myCustomProp: ${myCustomProp}`}
    </TabPanel>
  );
   
  CustomTabPanel.tabsRole = 'TabPanel'
  const url = window.location.href.split("/").pop();
  const vals = Object.keys(ToolbarData);
  for (var i = 0; i < vals.length; i++) {
    if (vals[i] === url) {
      const list = vals[i];
      return (
        <div className="toolbar">
          {Object.values(ToolbarData[list]).map((item,i) => (
            <div className={classes.root}>
              <Tabs
                key={i}
                isActive={isActive(item.id)}
                onActiveTab={() => handleActive(item.id)}
              >
                <TabList>
                  <CustomTab className={className} isActive={props.isActive} onClick={props.onActiveTab}> {item.name}</CustomTab>
                </TabList>
              </Tabs>
              <CustomTabPanel children={item.name} />
            </div>
          ))}
        </div>
      );
    }
  }
};
export default ToolBar;

The information comes right from the Json file and I get the components of each tab from somewhere else. I tried different solutions but did not come to a conclusion