Allow keyboard navigation with up/down arrows when sp-menu-item is adjacent to sp-menu-group

[Andrei0872]

Link to playground.

Currently, the keyboard navigation with up/down arrows breaks when <sp-menu-item> is adjacent to <sp-menu-group>:

<sp-menu tabindex="0">
      <sp-menu-item>
          foo
      </sp-menu-item>
      <sp-menu-group>
          <sp-menu-item>
             bar
          </sp-menu-item>
      </sp-menu-group>
  </sp-menu>

The current workaround is to wrap <sp-menu-item> with <sp-menu-group>:

<sp-menu tabindex="0">
  <sp-menu-group>
    <sp-menu-item  label="central">
        foo
    </sp-menu-item>
  </sp-menu-group>
  
  <sp-menu-group>
      <sp-menu-item>
          bar
      </sp-menu-item>
  </sp-menu-group>
</sp-menu>

Would it be possible to support having <sp-menu-item>s adjacent to <sp-menu-group> ?

Steps to reproduce the current behaviour

1. Have an <sp-menu> with <sp-menu-item>s inside of it, then add an <sp-menu-group> as a sibling to an <sp-menu-item>
2. Tab to the menu
3. Navigate the using up and down keys
4. Notice that navigation gets stuck after few up down keys