Render components on Material UI tabs - reactjs

Question

I have been trying to render certain components on clicking inside a tab content.
This is what i have been doing:
import React, { Component } from "react";
export class Global extends Component {
render() {
return <div>Global</div>;
}
}
export default Global;
This is a basic component to show.
import React, { Component } from "react";
import PropTypes from "prop-types";
import AppBar from "#material-ui/core/AppBar";
import Tabs from "#material-ui/core/Tabs";
import Tab from "#material-ui/core/Tab";
import Typography from "#material-ui/core/Typography";
import Toolbar from "#material-ui/core/Toolbar";
import Button from "#material-ui/core/Button";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import IconButton from "#material-ui/core/IconButton";
import SearchIcon from "#material-ui/icons/Search";
import Link from "#material-ui/core/Link";
import Global from "../Dashboard/Global";
import Graficos from "../Dashboard/Graficos";
import Individual from "../Dashboard/Individual";
import Temporais from "../Dashboard/Temporais";
import CSSTransitionGroup from "react-addons-css-transition-group";
import { Paper } from "#material-ui/core";
import { classes } from "../constants/tabs";
function TabContainer(props) {
return (
<Typography
component="div"
style={{
padding: 8 * 3
}}
>
{" "}
{props.children}{" "}
</Typography>
);
}
TabContainer.propTypes = {
children: PropTypes.node.isRequired
};
//const sections = ["Indicador 1", "Indicador 2", "Indicador 2", "Indicador 2"];
const PageShell = (Page, previous) => {
return props => (
<div className="page">
<CSSTransitionGroup
transitionAppear={true}
transitionAppearTimeout={600}
transitionEnterTimeout={600}
transitionLeaveTimeout={600}
transitionName={props.match.path === "/one" ? "SlideIn" : "SlideOut"}
>
{console.log(props)}
<Page {...props} />
</CSSTransitionGroup>
</div>
);
};
function ItemOne(theme) {
return (
<Paper>
<div>Item 1</div>
</Paper>
);
}
function ItemTwo(theme) {
return (
<Paper>
<div>Item two</div>
</Paper>
);
}
export default function Header() {
const [value, setValue] = React.useState(0);
function handleChange(event, newValue) {
setValue(newValue);
}
return (
<div className={classes.root}>
<AppBar position="static">
<Tabs value={value} onChange={handleChange}>
{/* <Tabs value={value} onChange={handleChange}>
{sections.map(section => (
<Tab label={section} />
))}
</Tabs> */}
<Tab label="Item One" component={Link} to="/global" />
<Tab label="Item Two" component={Link} to="/individual" />
<Tab label="Item Three" component={Link} to="/temporal" />
<Tab label="Item Four" component={Link} to="/graficos" />
</Tabs>
</AppBar>
<Switch>
<Route path="/global" component={PageShell(ItemOne)} />
<Route path="/individual" component={PageShell(ItemTwo)} />
</Switch>
{/* {value === 0 && <TabContainer>Item One</TabContainer>}
{value === 1 && <TabContainer>Item Two</TabContainer>}
{value === 2 && <TabContainer>Item Three</TabContainer>}
{value === 3 && <TabContainer>Item Four</TabContainer>} */}
</div>
);
}
This is my material header and im trying to load that global component below my header. The idea is that my header is fixed and the component renders on tab click. Can anyone help me with what im doing wrong ?