Bug: deleting structure via DOM API breaks state updates

<!-- Please provide a clear and concise description of what the bug is. Include screenshots if needed. Please test using the latest version of the relevant React packages to make sure your issue has not already been fixed. --> React version: 18.2.0 ## Steps To Reproduce 1. have a node with a nested structure that embeds state 2. change that nodes innerHTML, e.g. by setting it empty 3. update the state 4. updated state does not restore DOM Nodes Link to code example: https://codesandbox.io/p/sandbox/react-webcomponents-69d8v8 ## The current behavior DOM stays empty, i.e. rerenders have no effect ## The expected behavior DOM should be re-populated, i.e. react should take control again. ## Context I can kind of understand why react "breaks" but the issue here is that by e.g. using webcomponents that integrate with forms and implement a "reset" behaviour the applied solution will most likely involve some kind of innerHTML setting. I wish react wouldn't just "give up" in such cases. Is there a workaround possible here?