Current behavior 😯

Children of the list item are triggering onHighlightChange unexpectedly.

In the code below the span will trigger onHighlightChange

      renderOption={(p, { label }) => {
        return (
          <div {...p}>
            <span>{label}</span>
          </div>
        );
      }}

Expected behavior 🤔

The children of the list item should not trigger onHighlightChange event.

Steps to reproduce 🕹

Steps:

1. open this codesandbox
2. open console
3. open Autocomplete
4. mouse over an item label as shown in picture
5. look at the console message count

Context 🔦

By applying pointerEvents: none to the child elements, this problem can be solved, however I don't believe this is a viable solution since use may need to use child events. and I believe it should be handled internally.

Your environment 🌎