Cannot process custom markdown syntax, why?

[reypm]

After reading the components docs and coming from this suggestion and having some issues for processing custom markdown as for example:

const markdownSource = `
# heading

:::::my-include{id=some-id}
:::::
`;

const App = () => {
  return (
    <Markdown
      remarkPlugins={[
        remarkGfm,
        remarkDirective,
        [remarkFrontmatter, ["yaml", "toml"]],
        remarkBreaks
      ]}
      rehypePlugins={[rehypeExternalLinks, rehypeSlug]}
      remarkRehypeOptions={{ allowDangerousHtml: true }}
      components={{
        // @ts-ignore
        "my-include": ({ node, className, children, ...props }: any) => {
          console.log(node);
          console.log("node");
        }
      }}
    >
      {markdownSource}
    </Markdown>
  );
};

I don't see the node object or the "node" string logged to the console, why? What I am not getting?

[ChristianMurphy]

Hey @reypm! 👋
Directives don't have a standard HTML equivalent, you need to give them one using a remark plugin.
You can see an example of this in the responses to your previous question https://github.com/orgs/syntax-tree/discussions/104#discussioncomment-6450174
You can also find more information in the remark-directive readme. https://github.com/remarkjs/remark-directive#use