Tabs Component including Cards crashing - reactjs

Question

I have to build a web application using React & Material-UI frameworks.
I use a tab component to display mutliple cards (includiing charts) inside. The first tab works pretty good, but when I want to switch to the second tab, there is no displaying inside the tab. Worst, I can't return to the first tab ; the Tabs Component is completely dead.
You can find my code here :
class NavTabs extends React.Component {
state = {
value: 0,
};
handleChange = (value) => {
this.setState({ value });
};
render() {
const { classes } = this.props;
const { value } = this.state;
return (
<div className={classes.root}>
<AppBar position="static">
<Tabs fullWidth value={value} onChange={this.handleChange}>
<Tab label="FINANCIAL" />
<Tab label="OPERATIONAL" />
<Tab label="PLANNING" />
</Tabs>
</AppBar>
{value === 0 && <TabContainer>
<div className={classes.card_up}>
<CashWindow />
<SalesWindow />
</div>
<div className={classes.card_up}>
<CostsWindow />
<MarginsWindow />
<ContingenciesWindow />
</div>
<Button className={classes.button_more}>Details</Button>
</TabContainer>}
{value === 1 && <TabContainer>
<div className={classes.card_up}>
<OpportunitiesWindow />
<CriticalIssuesWindow />
</div>
<div className={classes.card_up}>
<QualityWindow />
</div>
<Button className={classes.button_more}>Details</Button>
</TabContainer>}
{value === 2 && <TabContainer>
<div className={classes.card_up}>
<ResourcesWindow />
</div>
</TabContainer>}
</div>
);
}
}
I don't have any error with the others components, because when I am trying to move components of the second tab into the first, it works. My conclusion is that the problem come from the Tabs Component.
Does anyone know how to fix this ?
Maybe I am doing wrong, I am a beginner in React programming.