Please kindly guide me how to add custom component into this react-markdown

[codeleeks]

i'm new on react-markdown

i want to transform jsx like strings to react component without mdx.
i just wanted to use this react-markdown library and related plugins.

here's a example

This is my markdown source.(.md file)

i want to transform it into react component like below

my code is

      <Markdown
        rehypePlugins={[rehypeHighlight, rehypeRaw, rehypeSlug, remarkGfm]}
        className='contents'
        components={{
          code(props) {
            const { children, className, node, ...rest } = props
            const match = /^hljs\s/.test(className)
            return (
              <code {...rest} className={match ? className : 'hljs'}>
                {children}
              </code>
            )
          },
         // this is what i've been trying to add.
          messagebox(props) {
            const { children, node, ...rest } = props
            return <MessageBox>{children}</MessageBox>
          },
        }}
      >
        {skipped}
      </Markdown>

but this code doesn't work very well.
please ignore korean.

Expect:

Actual:

i guess that's because following contents became children of my custom component.

how should i fix this?

[wooorm]

You have MDX. Use MDX.

[codeleeks]

You have MDX. Use MDX.

is there any workaround to fix this issue using react-markdown, not MDX

[wooorm]

Anything is possible but you are asking the wrong questions.
Why do you not want to use @mdx-js/mdx when you have MDX?