title: React Material Tabs indicator not showing on first load
body: <p>I have a simple Tabs setup with React Material UI (<a href="https://material-ui.com/components/tabs/" rel="noreferrer">https://material-ui.com/components/tabs/</a>) where the path value is set dynamically</p>
  
  <pre><code>export const Subnav: React.FC&lt;Props&gt; = ({ routes = [] }) =&gt; {
    const { pathname } = useLocation();
    const { push } = useHistory();    
    const handleChange = (e: ChangeEvent&lt;{}&gt;, path: string) =&gt; push(path);
  
    return (
      &lt;Tabs
        indicatorColor="primary"
        onChange={handleChange}
        scrollButtons="auto"
        textColor="primary"
        value={pathname}
        variant="scrollable"
      &gt;
        {routes.map(r =&gt; (
          &lt;Tab label={r.name} value={r.path} /&gt;
        ))}
      &lt;/Tabs&gt;
    );
  };
  </code></pre>
  
  <p>When I first load a page / navigate to one of the tab routes, the correct tab is selected, but the indicator is not shown. In order for the indicator to be shown I have to click the same tab again or select another.</p>