InnerBlocks are being removed and added again in React DOM with templateLock="contentOnly"

[louwie17]

Description

Currently when rendering inner blocks within a templateLock="contentOnly" block, the React dom nodes are initially rendered, then removed, and then rendered again. This only appears to happen when templateLock is set to contentOnly, setting it to any of the other values, it correctly renders once.
This is causing some un-expected behaviour for us as we make use of SlotFills within the inner blocks, which also end up being removed and re-added. This is noticeable when the page is being rendered.

I expect the inner blocks content to be only rendered once.

Step-by-step reproduction instructions

1. Create a WordPress site, and download this gist, copy the contents within the wp-content/mu-plugins folder.
2. Go to Books > Add New and open your browser console
3. Notice how first the render log is triggered, then removed and then rendered again.
4. Now edit the blocks.js file and remove the use of templateLock="contentOnly" and go to Books > Add New
5. Notice how only the rendered logs are triggered now.

Screenshots, screen recording, code snippet

Gist used: https://gist.github.com/louwie17/20328e1d2c723e34e9cb979dd156fe47

Kapture.2023-04-28.at.12.04.09.mp4

Environment info

• WordPress 6.2 (Both without Gutenberg and with Gutenberg 15.6.2)
• Active Theme: Twenty Twenty-ThreeVersion: 1.1
• Browser: Google Chrome: 112.0.5615.137
• Desktop with macOS Ventura 13.3.1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[Mamaduka]

I confirmed the behavior by adding temp debugging code to the Group block.

I'm not sure we should use the "Bug" label here since the components should be resilient, being mounted/unmounted multiple times.

Debugging code

useEffect( () => {
  console.log( 'Edit mounting' );
  return () => console.log( 'Edit unmounting' );
}, [] );