<p dir="auto">such as</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="file: '/node_modules/material-ui/BottomNavigation/BottomNavigationButton.js.flow'
severity: 'Error'
message: 'React element `Icon` (This type is incompatible with empty See also: React element `Icon`)'
at: '145,16'
source: 'flow'"><pre class="notranslate"><code class="notranslate">file: '/node_modules/material-ui/BottomNavigation/BottomNavigationButton.js.flow'
severity: 'Error'
message: 'React element `Icon` (This type is incompatible with empty See also: React element `Icon`)'
at: '145,16'
source: 'flow'
</code></pre></div>


<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/callemall/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>

<p dir="auto">No errors.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">Config the flow config with create-react-app settings. it seems to work with previous version.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<ol dir="auto">
<li>create-react-app</li>
<li>eject</li>
<li>flow-init</li>
<li>copy paste .flowconfig</li>
<li>if use the MUI component to nested in, say, a div</li>
</ol>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div&gt;
&lt;Button&gt;test&lt;/Button&gt;
&lt;/div&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-ent">Button</span><span class="pl-c1">&gt;</span>test<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Button</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span></pre></div>
<ol start="6" dir="auto">
<li>then run <code class="notranslate">flow</code></li>
<li>error comes out</li>
</ol>
<h2 dir="auto">Context</h2>
    
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>^1.0.0-beta.19</td>
</tr>
<tr>
<td>React</td>
<td>^16.0.0</td>
</tr>
<tr>
<td>browser</td>
<td></td>
</tr>
<tr>
<td>flow-bin</td>
<td>0.58.0</td>
</tr>
</tbody>
</table>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">I have set a callback function for the onItemClick property of Menu. I expect the call back function to be executed for all nested levels of menu items upon clicking that item</p>

<h2 dir="auto">Current Behavior</h2>
<p dir="auto">As of now only the first level of menu items work as expected. The nested menu items below the first level do not invoke the call back function</p>

<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">My render function code is as described below</p>

<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="	render() {

		if (this.state.redirect) {
			return &lt;Redirect push to={{ pathname: this.state.redirectPath }}	 /&gt;
		}
		
		return(
			&lt;MuiThemeProvider&gt;
				&lt;div style={styles.megaMenuContainerStyle} &gt;
						&lt;Menu
							desktop={true}
							width={100}
							onItemClick={this.menuItemClicked}
						&gt;
							&lt;MenuItem primaryText=&quot;Map View&quot; insetChildren={true} /&gt;
							&lt;MenuItem 
								primaryText=&quot;Chart View&quot; 
								insetChildren={true} 
								rightIcon={&lt;ArrowDropRight /&gt;}
								menuItems={[
											&lt;MenuItem primaryText=&quot;Time Series Chart View&quot; /&gt;,
											&lt;MenuItem primaryText=&quot;Scatter Chart View&quot; /&gt;,
											&lt;MenuItem primaryText=&quot;Calendar Chart View&quot; insetChildren={true} /&gt;
									]}
							/&gt;
							&lt;MenuItem primaryText=&quot;Table View&quot; insetChildren={true} /&gt;
							&lt;MenuItem primaryText=&quot;Schematic View&quot; insetChildren={true} /&gt;
						&lt;/Menu&gt;				
				&lt;/div&gt;
			&lt;/MuiThemeProvider&gt;
		)
	}
"><pre class="notranslate"><code class="notranslate">	render() {

		if (this.state.redirect) {
			return &lt;Redirect push to={{ pathname: this.state.redirectPath }}	 /&gt;
		}
		
		return(
			&lt;MuiThemeProvider&gt;
				&lt;div style={styles.megaMenuContainerStyle} &gt;
						&lt;Menu
							desktop={true}
							width={100}
							onItemClick={this.menuItemClicked}
						&gt;
							&lt;MenuItem primaryText="Map View" insetChildren={true} /&gt;
							&lt;MenuItem 
								primaryText="Chart View" 
								insetChildren={true} 
								rightIcon={&lt;ArrowDropRight /&gt;}
								menuItems={[
											&lt;MenuItem primaryText="Time Series Chart View" /&gt;,
											&lt;MenuItem primaryText="Scatter Chart View" /&gt;,
											&lt;MenuItem primaryText="Calendar Chart View" insetChildren={true} /&gt;
									]}
							/&gt;
							&lt;MenuItem primaryText="Table View" insetChildren={true} /&gt;
							&lt;MenuItem primaryText="Schematic View" insetChildren={true} /&gt;
						&lt;/Menu&gt;				
				&lt;/div&gt;
			&lt;/MuiThemeProvider&gt;
		)
	}

</code></pre></div>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>0.20</td>
</tr>
<tr>
<td>React</td>
<td>16.0</td>
</tr>
<tr>
<td>browser Chrome</td>
<td>63.0.3239.84</td>
</tr>
</tbody>
</table>