Option for removing block not appearing in custom gutenberg block

Question

I'm developing a custom gutenberg block. I'm able to get the fields to appear and I'm able to interact with it when adding it to a page. But the menu that allows you to remove the block does not appear when it's highlighted. I'm referring to the menu in the screenshot below

I'm using the esnext syntax and this is what my main block js file looks like

    import "./style.scss";
import "./editor.scss";

const { __, setLocaleData } = wp.i18n;
const {
    registerBlockType,
} = wp.blocks;
const {
    RichText,
    MediaUpload,
} = wp.editor;
const { Button } = wp.components;

registerBlockType( 'tc-blocks/hero-block', {
    title: __( 'Hero Block', 'tc-blocks' ),
    icon: 'index-card',
    category: 'layout',
    attributes: {
        title: {
            type: 'string',
            source: 'attribute',
            selector: 'h2',
        },
        mediaID: {
            type: 'number',
        },
        mediaURL: {
            type: 'string',
            source: 'attribute',
            selector: 'img',
            attribute: 'src',
        },
    },
    edit: ( props ) => {
        const {
            className,
            attributes: {
                title,
                mediaID,
                mediaURL,
            },
            setAttributes,
        } = props;
        const onChangeTitle = ( value ) => {
            setAttributes( { title: value } );
        };

        const onSelectImage = ( media ) => {
            setAttributes( {
                mediaURL: media.url,
                mediaID: media.id,
            } );
        };

        return (
            <div className={ className }>
                <RichText
                    tagName="h2"
                    placeholder={ __( 'Write Title…', 'tc-blocks' ) }
                    value={ title }
                    onChange={ onChangeTitle }
                />
                <div className="tc-image">
                    <MediaUpload
                        onSelect={ onSelectImage }
                        allowedTypes="image"
                        value={ mediaID }
                        render={ ( { open } ) => (
                            <Button className={ mediaID ? 'image-button' : 'button button-large' } onClick={ open }>
                                { ! mediaID ? __( 'Upload Image', 'tc-blocks' ) : <img src={ mediaURL } alt={ __( 'Upload Image', 'tc-blocks' ) } /> }
                            </Button>
                        ) }
                    />
                </div>
            </div>
        );
    },
    save: ( props ) => {
        const {
            className,
            attributes: {
                title,
                mediaURL,
            },
        } = props;
        return (
            <div className={ className }>
                <RichText.Content tagName="h2" value={ title } />

                {
                    mediaURL && (
                        <img className="tc-image" src={ mediaURL } alt={ __( 'Image', 'tc-blocks' ) } />
                    )
                }
            </div>
        );
    },
} );

Here's how I'm registering the block type in my index.php file

function tc_blocks_hero_block_block_init() {
    register_block_type_from_metadata( __DIR__ );
}
add_action( 'init', 'tc_blocks_hero_block_block_init' );

And here's my block.json file

{
"apiVersion": 2,
"name": "tc-blocks/hero-block",
"title": "Hero Block",
"category": "widgets",
"icon": "smiley",
"description": "This is a header block built for a large hero image and text",
"supports": {
    "html": false
},
"textdomain": "hero-block",
"editorScript": "file:./build/index.js",
"editorStyle": "file:./build/index.css",
"style": "file:./build/style-index.css"
 }

I've compared my code to the gutenberg examples code found here https://github.com/WordPress/gutenberg-examples but I can't seem to find any major differences that would cause an issue and I don't see any js errors in the console.

How do I get the remove block menu to appear in my custom block?

UPDATE: One thing I noticed in the dom is that the blocks that have the menu attached to them have a unique id and various other attributes like what appears below

<p id="block-761ca223-cfd6-4dc4-8f28-36c2e1326feb" tabindex="0" role="group" aria-label="Block: Starter Block" data-block="761ca223-cfd6-4dc4-8f28-36c2e1326feb" data-type="create-block/starter-block" data-title="Starter Block" class="wp-block-create-block-starter-block block-editor-block-list__block wp-block is-selected">Starter Block – hello from the editor!</p>

And my version is encapsulated by a single div with no attributes.

Answer 1

The issue was that I was missing { ...useBlockProps() } from the encapsulated div. I was able to resolve the issue by changing the opening div returned in the edit attribute to

<div {...useBlockProps()}>