Custom components in react-markdown - reactjs

Question

I would like to create a custom component in react-markdown. Specifically I need to be able to create a tag that will allow me to create a tooltip. E.g. [name]{ tooltip content}. I found a similar solution in the link. Unfortunately the component is created as a regular div and not as my component. I don't know exactly what I did wrong.
my code:
import React from "react";
import styled from "styled-components";
import ReactMarkdown from "react-markdown";
import directive from "remark-directive";
import { visit } from "unist-util-visit";
import { h } from "hastscript/html.js";
const Test = styled.span`
font-size: 12rem;
font-family: "DM Serif Display", serif;
`;
const TestComp = ({ ...props }) => {
return <Test> {props.children}</Test>;
};
const components = {
myTag: TestComp,
};
// remark plugin to add a custom tag to the AST
function htmlDirectives() {
return transform;
function transform(tree) {
visit(
tree,
["textDirective", "leafDirective", "containerDirective"],
ondirective
);
}
function ondirective(node) {
var data = node.data || (node.data = {});
var hast = h(node.name, node.attributes);
data.hName = hast.tagname;
data.hProperties = hast.properties;
}
}
var markdown =
' Some markdown with a :myTag[custom directive]{title="My custom tag"}';
const Text = () => {
return (
<ReactMarkdown
className={"markdown"}
components={components}
remarkPlugins={[directive, htmlDirectives]}
children={markdown}
linkTarget={"_blank"}
/>
);
};
export default Text;

Answer 1

I use markdown-to-jsx to use custom component.
https://www.npmjs.com/package/markdown-to-jsx