Initial state:

<span> <!-- containerRef-->
  <a> <!-- buttonRef -->
  </a>
</span>

After adding a tempSpan:

<span> <!-- containerRef-->
  <a></a> <!-- buttonRef -->
  <span></span> <!-- tempSpan -->
</span>

With tempSpan.appendChild(buttonRef.current):

<span> <!-- containerRef-->
  <span> <!-- tempSpan -->
    <a></a> <!-- buttonRef -->
  </span>
</span>

Therefore, when restoring the state on error or inside useEffect, it should be:

containerRef.current.replaceChild(buttonRef.current, containerRef.current.lastChild);

So that it goes back to initial state.

The reason we have this tempSpan is because this library runs async rendering that dispatches outside of react lifecycles, therefore we want to make sure when we come back to react lifecycle, react should not see any DOM patch that we have done so that it can patch DOM incrementally. In order to do that we have to restore the DOM to the state that react generates. The primary goal of using an additional tempSpan is allow us to easily check if we have patched the DOM outside of react or not, and acting accordingly.