Gutenburg Inserting a DIV around Floated Images Breaking the Float

I am using gutenberg to layout blog posts, some of these posts will have an image floating aside a paragraph.

For whatever reason Wordpress inserts a div around the floating image breaking the effect.

Here is example HTML that it outputs:

<div class="wp-block-image">
<figure class="alignleft  size-full is-resized">
<img decoding="async" src="/wp-content/webp-express/webp-images/uploads/2023/06/company-working.png.webp" alt="a group of employees working together at a large desk in a brightly lit office building" class="wp-image-3120" style="width:350px" width="350">
</figure>
</div>

Which leads to an image that is not as wide as the page just breaking up the text instead of floating around like the preview screen.

Frontend:

Edit page:

I tried the method outlined here by adding it to the functions.php file to filter the block output but it doesn't seem to work. https://www.binarymoon.co.uk/2021/03/fixing-gutenberg-image-floats/

I also see refences to this issue on the gutenburg github as being fixed but my WP version is up to date and still has the problem. https://github.com/WordPress/gutenberg/issues/28820

Any help or insight would be helpful, thank you!

After tangling this for a while I realized the parent container around the post content and images set to display: flex thus breaking all the floats. Whoops, adding an unstyled div tag around the content / images in the post template fixed it right up.