require() of ES Module node_modules/remark-gfm/index.js from .cache/compiled/gatsby-config.js not supported

I am trying to create some dynamic pages from mdx in gatsby, using below code

import { compileMDX } from 'gatsby-plugin-mdx';
import remarkGfm from 'remark-gfm';

const mdxContent = await compileMDX(
    { absolutePath, source: content.toString() },
    {
        outputFormat: 'function-body',
        jsxRuntime: 'automatic',
        jsx: false,
        useDynamicImport: true,
        remarkPlugins: [remarkGfm]
    }, cache, reporter
)

But it doesn't seem to be working, I read at https://github.com/gatsbyjs/gatsby/discussions/37069 that gatsby compies gatsby-node.ts to CommonJs module. Getting below error -

Failed to import compiled file ".cache/compiled/gatsby-node.js" after retry, attempting
another retry (#2 of 5) - "require() of ES Module node_modules/remark-gfm/index.js from .cache/compiled/gatsby-config.js not supported.
Instead change the require of index.js in .cache/compiled/gatsby-config.js to a dynamic import()
 which is available in all CommonJS modules."

I tried changing to dynamic import but still getting the same error

const remarkGfm = await import('remark-gfm')
const mdxContent = await compileMDX(
    { absolutePath, source: content.toString() },
    {
        outputFormat: 'function-body',
        jsxRuntime: 'automatic',
        jsx: false,
        useDynamicImport: true,
        remarkPlugins: [remarkGfm.default]// tried [remarkGfm] as well
    }, cache, reporter
)

I feel like something else is wrong and its possibly misleading error. Any help on this would be highly appreciated thanks.