Custom Gutenberg block within column block update issue

Question

I’m making a custom gutenberg card block
When I put the card block within another block like a column I’m having issues in selecting and updating it
This video shows the card block within the column block - it's difficult to access it when you click on it.
When the custom block is not within another block there are no issues in updating it as you will see in the video
https://www.loom.com/share/4688eaa3d0114faa84b92b4776d3e645?sid=d667f54a-7dde-48d3-9512-5a8aa079b07f

Here's the edit code:

import { __ } from '@wordpress/i18n';
import { InnerBlocks, RichText, MediaUpload, InspectorControls, useBlockProps } from '@wordpress/block-editor';
import { Button, PanelBody } from '@wordpress/components';
import './editor.scss';

export default function Edit( { attributes, setAttributes } ) {
    const { imageTitle, imageUrl, imageAlt, imageFilename, title, body } = attributes;

    return (
        <>
            <InspectorControls>
                <PanelBody title={ __( 'Settings', 'copyright-date-block' ) }>
                    <MediaUpload
                        onSelect={(media) => {
                            setAttributes({
                                imageTitle: media.title,
                                imageFilename: media.filename,
                                imageUrl: media.url,
                            });
                        }}
                        multiple={false}
                        allowedTypes={ ['image'] }
                        render={ ( { open } ) => (
                            <Button onClick={ open }>Open Media Library</Button>
                        ) }
                    />
                </PanelBody>
            </InspectorControls>
            <div
                { ...useBlockProps() }
                className="card"
                style={{ backgroundImage: `url(${imageUrl})`}}
            >
                <div className="card__overlay"></div>
                <div className="card__content">
                    <RichText
                        tagName="h3"
                        className="card__title"
                        identifier="title"
                        value={ title }
                        allowedFormats={ [ 'core/bold' ] } // Allow the content to be made bold or italic, but do not allow othe formatting options
                        onChange={ ( value ) => setAttributes( { title: value } ) }
                        placeholder={ __( 'Title...' ) }
                    />
                    <RichText
                        tagName="p"
                        className="card__body"
                        identifier="body"
                        value={ body }
                        allowedFormats={[]} // Allow the content to be made bold or italic, but do not allow othe formatting options
                        onChange={ ( value ) => setAttributes( { body: value } ) }
                        placeholder={ __( 'Body...' ) }
                    />
                    <InnerBlocks
                        allowedBlocks={['core/button']}
                    />
                </div>
            </div>
        </>
    );

Answer 1

You seem to have useBlockProps() and extra props outside of this hook:

<div
  { ...useBlockProps() }
  className="card"
  style={{ backgroundImage: `url(${imageUrl})`}}
>

Your className would override any className value provided by the useBlockProps(), potentially causing the undesired behavior.

Instead, consider merging the props into the props that would be emitted by useBlockProps() by passing them into useBlockProps() first as an object:

const blockProps = useBlockProps({
  className: 'card',
  style: {
    backgroundImage: `url(${imageUrl})`,
  },
});

// …

<div { ...blockProps}>