SandBox not re-rendered after HTML changes

[mmtr]

Describe the bug
The SandBox component from the @wordpress/components package is not re-rendered when the injected html prop changes.

To reproduce

• Paste the following code in playground/src/index.js:

import { render, useState, Fragment } from '@wordpress/element';
import { SandBox, SelectControl } from '@wordpress/components';
import './style.scss';
import '@wordpress/components/build-style/style.css';

function App() {
	const [ fruit, setFruit ] = useState( 'Bananas' );
	const html = `<div>Selected fruit: <strong>${ fruit }</strong>!</div>`;

	return (
		<Fragment>
			<SelectControl
				label="Fruit"
				value={ fruit }
				options={ [
					{ label: 'Bananas', value: 'Bananas' },
					{ label: 'Oranges', value: 'Oranges' },
					{ label: 'Apples', value: 'Apples' },
				] }
				onChange={ ( value ) => { setFruit( value ) } }
			/>
			<SandBox html={ html } />
		</Fragment>
	);
}

render(
	<App />,
	document.querySelector( '#app' )
);

• Run npm run playground:start.
• Go to http://localhost:1234.
• Select any other fruit than Bananas.

Expected behavior
The selected fruit text displayed below the fruit selector should be updated after selecting any other fruit, but it keeps unchanged:

Screenshots

[swissspidy]

Sounds like a duplicate of #16612.

Can you test #16669 to see if that fixes the issue?

[mmtr]

Sounds like a duplicate of #16612.

Can you test #16669 to see if that fixes the issue?

I don't think it's related to #16612. I verified I can still reproduce the issue with #16669.

Seems to be more a problem on how the SandBox component is implemented. The render function doesn't use at all the html prop, which is why any change to that prop doesn't trigger any update. The html prop is only used on trySandbox, but that method is only called after the SandBox component has been already rendered.