Preact adding elements out of order when replacing elements in DOM

[jaredkrinke]

• Check if updating to the latest Preact version resolves the issue (No, it doesn't)

Describe the bug
Preact seems to be adding HTML elements out of order when updating the DOM, given the right set of before/after elements. In my case, I'm swapping between two pieces of content.

This happens on 10.11.0 and 10.5.8, but does not happen on 10.5.7--so it seems like a regression in 10.5.8.

Tested on 10.11.0 in MS Edge Version 105.0.1343.42 on Windows (both 64-bit)

To Reproduce

Start with the sandbox:
https://codesandbox.io/s/preact-x-preact-cli-3-starter-vj285y2rn3

IMPORTANT: Upgrade to latest preact version! (Note: the dropdown is very finicky...)

Paste in this code:

import { Component, Fragment, render } from "preact";

class App extends Component {
  constructor(props) {
      super(props);
      this.state = { first: true };
  }

  render() {
      if (this.state.first) {
          return <Fragment>
              {<><p>1. Original item first paragraph</p></>}
              <p>2. Original item second paragraph</p>
              <button onClick={() => this.setState({ first: false })}>Click me</button>
          </Fragment>;
      } else {
          return <Fragment>
              <p>1. Second item first paragraph</p>
              {<Fragment>
                  <p>2. Second item second paragraph</p>
                  <div></div>
              </Fragment>}
          <button onClick={() => this.setState({ first: true })}>Click me</button>
          </Fragment>;
      }
  }
}

// Codesandbox workaround.
render(<App />, window.root);

Steps to reproduce the behavior:

1. Observe first set of elements in expected order
2. Click the button
3. Observe the second set of elements in expected order
4. Click the button

Expected behavior
The first set of elements should be shown in the same order as in the first step.

Actual behavior
The first set of elements is shown in the wrong order!

[jaredkrinke]

For the record: in my case (which is fairly convoluted, but from which the repro above was derived), I was able to avoid this issue by adding a key attribute to distinguish different pieces of content that I swap between in my container.