useErrorBoundary causes double rendering of list item

[andraaspar]

• Check if updating to the latest Preact version resolves the issue

Describe the bug
If a list item throws and an error boundary catches it still within the list item, that sometimes causes the item to be rendered both in the errored state and normally too.
I have modified the todo app at https://preactjs.com/repl?example=todo-list-signals to demonstrate the issue I'm having.

To Reproduce

import { render } from "preact";
import { signal, computed } from "@preact/signals";
import { useErrorBoundary } from "preact/hooks";

const todos = signal([
  { text: "Write my first post", completed: true },
  { text: "Buy new groceries", completed: false },
  { text: "Walk the dog", completed: false },
]);

const completedCount = computed(() => {
  return todos.value.filter((todo) => todo.completed).length;
});

const newItem = signal("");

function addTodo() {
  todos.value = [...todos.value, { text: newItem.value, completed: false }];
  newItem.value = ""; // Reset input value on add
}

function removeTodo(index) {
  todos.value.splice(index, 1);
  todos.value = [...todos.value];
}

function TodoList() {
  const onInput = (event) => (newItem.value = event.target.value);

  return (
    <>
      <input type="text" value={newItem.value} onInput={onInput} />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.value.map((todo, index) => (
          <TodoItem key={index} todo={todo} index={index} />
        ))}
      </ul>
      <p>Completed count: {completedCount.value}</p>
    </>
  );
}

function TodoItem(props) {
  const [error] = useErrorBoundary();

  if (error) {
    return (
      <li>
        An error occurred: {error + ""}{" "}
        <button onClick={() => removeTodo(props.index)}>❌</button>
      </li>
    );
  }

  return <TodoItemInner {...props} />;
}

function TodoItemInner({ todo, index }) {
  if (todo.completed) {
    throw new Error("Todo completed!");
  }

  return (
    <li>
      <label>
        <input
          type="checkbox"
          checked={todo.completed}
          onInput={() => {
            todo.completed = !todo.completed;
            todos.value = [...todos.value];
          }}
        />
        {todo.completed ? <s>{todo.text}</s> : todo.text}
      </label>{" "}
      <button onClick={() => removeTodo(index)}>❌</button>
    </li>
  );
}

render(<TodoList />, document.getElementById("app"));

Steps to reproduce the behavior:

1. Try to check "Buy new groceries" to see it double rendered.

Expected behavior
The item should have rendered the same way as the "Write my first post" item.