<p dir="auto">While using the new version of ListItem this bit of code resulted in the following error <strong>uncaught Error: Invariant Violation: ReactMount: Two valid but unequal nodes with the same <code class="notranslate">data-reactid</code></strong><br>
Note that this ListItem itself was nested in other lists and cards. Funny thing is the same code worked with the earlier version of material-ui. Just wondering what changed and what I can do to fix this?</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div&gt;
    &lt;ListItem
        secondaryText = {&lt;p&gt; secondaryText &lt;/p&gt;}
        disableTouchTap = {true}
        rightIconButton={options}
        style = {
            {
                fontSize : 16,
                lineHeight : &quot;16px&quot;,
                backgroundColor : Colors.green50
            }
        }&gt;
            &lt;p&gt;ABCD&lt;/p&gt;
                &lt;p&gt;XYZ&lt;/p&gt;
    &lt;/ListItem&gt;
&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div&gt;
    &lt;ListItem
        secondaryText = {&lt;p&gt; secondaryText &lt;/p&gt;}
        disableTouchTap = {true}
        rightIconButton={options}
        style = {
            {
                fontSize : 16,
                lineHeight : "16px",
                backgroundColor : Colors.green50
            }
        }&gt;
            &lt;p&gt;ABCD&lt;/p&gt;
                &lt;p&gt;XYZ&lt;/p&gt;
    &lt;/ListItem&gt;
&lt;/div&gt;
</code></pre></div>
<p dir="auto">When a <code class="notranslate">Menu</code> has no selected items, it always has a highlighted first item.</p>


<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">If I open a menu that has no item with <code class="notranslate">select={true}</code> I would expect the menu to open with the first item highlighted for as long as the cursor is hovering over it and then when the cursor moves to another item, the first item should be un-highlighted. So, only the item that is under the cursor should be highlighted if there is no selected item.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">When the menu (with no selected items) opens, the first item is highlighted and remains highlighted (suggesting that it is somehow selected) while the cursor hovers over other items.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">See  <a href="https://material-ui-next.com/demos/menus/" rel="nofollow">simple menu demo</a></p>
<h2 dir="auto">Context</h2>
<p dir="auto">I am using a Menu to display a list of commands/actions that a user might want to execute. So I should like the menu to highlight only the command that the user is currently hovering over with the mouse. (Or on a touch device, no command should be highlighted)</p>
<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 17</td>
</tr>
<tr>
<td>React</td>
<td></td>
</tr>
<tr>
<td>browser</td>
<td></td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>