Not working with Gatsby 3, MDX and Prism

Reading the documentation my understanding is embed gist should come before Prism but for some reason this is not working and I'm unsure where my issue is. I've tried:

config:

{
  resolve: `gatsby-transformer-remark`,
  options: {
    plugins: [
      {
        resolve: 'gatsby-remark-embed-gist',
      },
      {
        resolve: `gatsby-remark-prismjs`,
        options: {
          classPrefix: 'language-',
          inlineCodeMarker: null,
          aliases: {},
          showLineNumbers: false,
          noInlineHighlight: false,
          languageExtensions: [
            {
              language: 'superscript',
              extend: 'javascript',
              definition: {
                superscript_types: /(SuperType)/,
              },
              insertBefore: {
                function: {
                  superscript_keywords: /(superif|superelse)/,
                },
              },
            },
          ],
          prompt: {
            user: 'root',
            host: 'localhost',
            global: false,
          },
          escapeEntities: {},
        },
      },
    ],
  },
},

and Ive tried with it's own transformer as the very first plugin:

    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-embed-gist',
            options: {
              gistDefaultCssInclude: true,
              gistCssPreload: true,
              gistCssUrlAddress:
                'https://github.githubassets.com/assets/gist-embed-b3b573358bfc66d89e1e95dbf8319c09.css',
            },
          },
        ],
      },
    },

When I search Issues I found:

Embed gist on gatsby-mdx page

which mentions manually importing but I thought this would be resolved in gistCssUrlAddress?

package.json:

  "dependencies": {
    "@mdx-js/mdx": "^1.6.22",
    "@mdx-js/react": "^1.6.22",
    "@popperjs/core": "^2.9.1",
    "bootstrap": "^4.6.0",
    "gatsby": "^3.0.1",
    "gatsby-plugin-manifest": "^3.0.0",
    "gatsby-plugin-mdx": "^2.0.1",
    "gatsby-plugin-offline": "^4.0.0",
    "gatsby-plugin-react-helmet": "^4.1.0",
    "gatsby-plugin-robots-txt": "^1.5.5",
    "gatsby-plugin-sharp": "^3.0.0",
    "gatsby-plugin-sitemap": "^3.1.0",
    "gatsby-remark-embed-gist": "^1.2.1",
    "gatsby-remark-images": "^4.0.0",
    "gatsby-remark-prismjs": "^4.0.0",
    "gatsby-source-filesystem": "^3.0.0",
    "gatsby-transformer-remark": "^3.0.0",
    "gatsby-transformer-sharp": "^3.0.0",
    "jquery": "^3.6.0",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "node-sass": "^5.0.0",
    "popper.js": "^1.16.1",
    "prism-react-renderer": "^1.2.0",
    "prismjs": "^1.23.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-icons": "^4.2.0"
  },
  "devDependencies": {
    "prettier": "2.2.1"
  },

Use case in my index.mdx:

`gist:weirdpattern/ce54fdb1e5621b5966e146026995b974#syntax.text`

Possible clash with gatsby-browser?

root-prism.js:

import React from 'react'
import { MDXProvider } from '@mdx-js/react'

import Prism from './src/components/Prism'

const components = {
  pre: Prism,
}

export const wrapMDX = ({ element }) => {
  return <MDXProvider components={components}>{element}</MDXProvider>
}

gatsby-browser.js:

// Prism
import { wrapMDX } from './root-prism'
export const wrapRootElement = wrapMDX

Curious to know am I misunderstanding how this is to me implemented?

weirdpattern / gatsby-remark-embed-gist

Not working with Gatsby 3, MDX and Prism #42