How to work with Astro MDX components in the Keyflow UI

[busykomodo]

I am attempting to include a <Steps> component in my MDX in an Astro Starlight project (https://starlight.astro.build/components/steps). Unfortunately, I can't figure out how to get Keystatic to work with that component.

When I do something like the following directly in the MDX file, Astro renders it just fine:

import { Steps } from '@astrojs/starlight/components';

<Steps>
// Steps go here
</Steps>

Unfortunately, Keystatic doesn't know how to handle that, giving the following error message:

Error: Field validation failed: content: Unexpected error: Error: Unhandled type mdxjsEsm: import {Steps} from '@astrojs/starlight/components';

I've attempted to build a content component that wraps the <Steps> component in a content-component wrapper, but as soon as I put import { Steps } from '@astrojs/starlight/components'; at the top of the file the browser stops rendering the Keystatic UI, with a white screen and a rather unhelpful message in the console.

I haven't found any resources on how to include existing MDX components in a Keystatic content component. I've looked through the projects in the Showcase that have a Github available, with no hints that I could decipher.

I'm OK if there is some sort of graceful failure, such as being able to ignore the field somehow form the Keystatic editor.

Any ideas or anything to point me in the general direction of some assistance will be appreciated, and I will be happy to provide any additional information that might be helpful.

Thanks in advance!