Group block edit component with dual visualizers

edit.js

/**
 * WordPress dependencies
 */
import { useSelect } from '@wordpress/data';
import {
	InnerBlocks,
	useBlockProps,
	InspectorAdvancedControls,
	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
	store as blockEditorStore,
} from '@wordpress/block-editor';
import {
	SelectControl,
	__experimentalBoxControl as BoxControl,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
const { __Visualizer: BoxControlVisualizer } = BoxControl;

function GroupEdit( { attributes, setAttributes, clientId } ) {
	const hasInnerBlocks = useSelect(
		( select ) => {
			const { getBlock } = select( blockEditorStore );
			const block = getBlock( clientId );
			return !! ( block && block.innerBlocks.length );
		},
		[ clientId ]
	);
	const blockProps = useBlockProps();
	const { tagName: TagName = 'div', templateLock } = attributes;
	const innerBlocksProps = useInnerBlocksProps(
		{
			className: 'wp-block-group__inner-container',
		},
		{
			templateLock,
			renderAppender: hasInnerBlocks
				? undefined
				: InnerBlocks.ButtonBlockAppender,
		}
	);

	return (
		<>
			<InspectorAdvancedControls>
				<SelectControl
					label={ __( 'HTML element' ) }
					options={ [
						{ label: __( 'Default (<div>)' ), value: 'div' },
						{ label: '<header>', value: 'header' },
						{ label: '<main>', value: 'main' },
						{ label: '<section>', value: 'section' },
						{ label: '<article>', value: 'article' },
						{ label: '<aside>', value: 'aside' },
						{ label: '<footer>', value: 'footer' },
					] }
					value={ TagName }
					onChange={ ( value ) =>
						setAttributes( { tagName: value } )
					}
				/>
			</InspectorAdvancedControls>
			<div style={ { position: 'relative', overflow: 'auto' } }>
				<BoxControlVisualizer
					values={ attributes.style?.spacing?.margin }
					showValues={ attributes.style?.visualizers?.margin }
				/>
				<TagName { ...blockProps }>
					<BoxControlVisualizer
						values={ attributes.style?.spacing?.padding }
						showValues={ attributes.style?.visualizers?.padding }
					/>
					<div { ...innerBlocksProps } />
				</TagName>
			</div>
		</>
	);
}

export default GroupEdit;