Gutenberg block development: How do you change container block?

I’ve been learning to create custom Gutenberg blocks and have noticed that all of the custom blocks are wrapped with a <div> within the editor while many of the built-in blocks are able to use the block’s own container. For simplicity, I’ll use the Paragraph block as an example (I’m using WP 5.6.1).

If you use the built-in paragraph block, the HTML in the editor will look something like this:

<p role="group" aria-multiline="true" aria-label="Paragraph block" class="block-editor-rich-text__editable block-editor-block-list__block wp-block is-selected rich-text" contenteditable="true" id="block-f66acf37-18a6-4ba6-932e-8f68a4f5b9ba" tabindex="0" data-block="f66acf37-18a6-4ba6-932e-8f68a4f5b9ba" data-type="core/paragraph" data-title="Paragraph" style="white-space: pre-wrap;">test</p>

If I make my own paragraph block, it will look like this:

<div role="group" aria-multiline="true" aria-label="Custom Paragraph block" class="block-editor-rich-text__editable block-editor-block-list__block wp-block is-selected rich-text" contenteditable="true" id="block-f66acf37-18a6-4ba6-932e-8f68a4f5b9ba" tabindex="0" data-block="f66acf37-18a6-4ba6-932e-8f68a4f5b9ba" data-type="custom/paragraph" data-title="Custom Paragraph" style="white-space: pre-wrap;">
    <p>test</p>
</div>

If I make it useBlockProps then it still includes the parent <div> but now the nested <p> duplicates all the attributes that were in the <div>.

<div role="group" aria-multiline="true" aria-label="Custom Paragraph block" class="block-editor-rich-text__editable block-editor-block-list__block wp-block is-selected rich-text" contenteditable="true" id="block-f66acf37-18a6-4ba6-932e-8f68a4f5b9ba" tabindex="0" data-block="f66acf37-18a6-4ba6-932e-8f68a4f5b9ba" data-type="custom/paragraph" data-title="Custom Paragraph" style="white-space: pre-wrap;">
    <p role="group" aria-multiline="true" aria-label="Custom Paragraph block" class="block-editor-rich-text__editable block-editor-block-list__block wp-block is-selected rich-text" contenteditable="true" id="block-f66acf37-18a6-4ba6-932e-8f68a4f5b9ba" tabindex="0" data-block="f66acf37-18a6-4ba6-932e-8f68a4f5b9ba" data-type="custom/paragraph" data-title="Custom Paragraph" style="white-space: pre-wrap;">test</p>
</div>

Through trial and error, I was able to use the editor.BlockListBlock filter to get rid of the container <div> but it also got rid of the block controls. Attempting to add the BlockControls back in had no effect.

Having the parent <div> in the editor is not a problem in simple scenarios, but can become problematic when using InnerBlocks if proper visual display in the editor is disrupted by the extra <div>s that won’t be there when rendered on the frontend.

Given that the built-in blocks are able to accomplish this, I assume there must be a way, but have yet to find any example of how.