title: navigation problem in Tabs provided by Material UI for React js Project
body: <p>I am using React Js in my project and the Material UI Tabs component to navigate between 2 components.</p>
  
  <p>When I go to Tab 2 or Tab 1 by clicking on it, my component renders and the route gets changed but the tab indicator does not get updated on the active tab. </p>
  
  <p>I've already tried to update the state on the button click but it isn't working</p>
  
  <pre class="lang-js prettyprint-override"><code>class NavBars extends React.Component {
    state = {
      value: 0,
    };
  
    handleChange = (event, value) =&gt; {
      this.setState({ value });
      console.log(this);
    };
  
    navigateToTab2 = () =&gt; {
      this.setState({ value: 1 });
      console.log(this.state);
      this.props.history.push('/tab2');
    }
  
    navigateToTab1 = (facility, event) =&gt; {
      this.setState({ value: 0 });
      console.log(this.state);
      this.props.history.push('/tab1', {
        facilityId: facility.facilityId,
        facilityName: facility.facilityName,
      });
    }
  
    render() {
      const { classes } = this.props;
      const { value } = this.state;
  
      return (
        &lt;div className={classes.root}&gt;
          &lt;Tabs
            value={value}
            onChange={this.handleChange}
            classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }}
          &gt;
            &lt;Tab
              disableRipple
              classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
              label="Tab 1"
              onClick={this.navigateToTab1}
            /&gt;
            &lt;Tab
              disableRipple
              classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
              label="Tab 2"
              onClick={this.navigateToTab2}
            /&gt;
          &lt;/Tabs&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>I expect that when I click on Tab1 it should go to Tab1 and render that component with Tab indicator be on Tab 1 and when I click on Tab 2 it should go to Tab 2 and render the Tab 2 component with tab indicator on tab 2 
  <a href="https://i.stack.imgur.com/YRaqs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YRaqs.png" alt="enter image description here"></a></p>