Blocks using Variations not getting styled on front end because dynamically generated IDs don't match

[pinksharpii]

Description

I have created a few block styles for headings and paragraph blocks. As an example, this is one of each:

<?php 
register_block_style(
                'core/heading',
                array(
                    'name'         => 'h2'
                    'label'        => 'H2'
                )
            );

register_block_style(
                'core/paragraph',
                array(
                    'name'         => 'h2'
                    'label'        => 'H2'
                )
            );

And then in my theme.json, I have styles defined for all of my variations under styles/blocks/variations (shortened for brevity):

"blocks": {
            "core/heading": {
                "variations": {
                    "h1": {
                        "typography": {
                            "fontSize": "var(--wp--custom--size--h-1)",
                            "lineHeight": "1em",
                            "fontWeight": "900",
                            "textTransform": "uppercase"
                        },
                        "color": {
                            "text": "inherit"
                        }
                    },
                    "h2": {
                        "typography": {
                            "fontSize": "var(--wp--custom--size--h-2)",
                            "lineHeight": "1.1em",
                            "fontWeight": "700"
                        },
                        "color": {
                            "text": "var(--wp--preset--color--red)"
                        }
                    },
                    "h3": {
                        "typography": {
                            "fontSize": "var(--wp--custom--size--h-3)",
                            "lineHeight": "1.3em",
                            "fontWeight": "500"
                        },
                        "color": {
                            "text": "var(--wp--preset--color--grey)"
                        }
                    },
            }
        }
}

As an aside note, the font sizes are custom variables I defined higher up in the json (again shortened to the necessary snippet):

    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "settings": {
        "custom": {
            "size": {
                "h1": "60px",
                "h2": "48px",
                "h3": "42px",
                "h4": "30px",
                "h5": "25px",
                "h6": "20px"
            }
        },

Step-by-step reproduction instructions

But I'm experiencing inconsistencies in the appropriate style tag actually being output. Sometimes they render and output the correct HTML just fine: These are h3 heading blocks styled as the h4 variation

But then other times, blocks will be output and not receive styling:

they appear correctly in the admin:

I believe the issue is the ID mapping. You can see in the Inspector above that each of those headings has a randomly generated ID like is-style-h3--1201e5b0c2adef11e541d2ddcd3f346e. And when I go look at the