What is the correct way to dynamically update the elements of the slot?

Question

I'm new in Web Component and Stencil. I have the menu with some items that change dynamically, when I try to add some menu item it shows in wrong place.

my-menu.tsx

render() {
  return (
    <div>
      <h2>Menu</h2>
      <ul class="menu">
        <slot />
      </ul>
    </div>
  );
}

use it page.jsx

renderMenuItems() {
   const menu = ['item 1', 'item 2', 'item 3'];

   return menu.map(item => <li key={item}>{item}</li>);
}

render(){
  return(
    <my-menu>
      {renderMenuItems()}
    </my-menu>
  )
}

my initial DOM looks like that:

<my-menu>
  <h2>Menu</h2>
  <ul class="menu">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ul>
</my-menu>

but if I dynamically changed menu arrays for example add some menu items:

const menu = ['item 1', 'item 2', 'item 3', 'item 4', 'item 5']

DOM looks like that:

<my-menu>
  <h2>Menu</h2>
  <ul class="menu">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ul>
  <li>item 4</li>
  <li>item 5</li>
</my-menu>

The dynamically added menu items uppers in wrong place - outside menu block.

How I can dynamically change slot elements for showing them in right place? Thanks in advance.