Example.tsx

export const Example1 = () => {
  return (
    <Markdown className="terms-text" inline>
      This is an exmplple of usage for [this gist](https://gist.github.com/Profesor08/63f8a23944cbb98705477198639cd3a5) in react
    </Markdown>
  );
};

export const Example2 = () => {
  return (
    <div><Markdown as="span" inline>
     [this gist](https://gist.github.com/Profesor08/63f8a23944cbb98705477198639cd3a5) in react
    </Markdown></div>
  );
};

Markdown.tsx

import { marked, MarkedOptions } from "marked";
import React, { useMemo } from "react";

interface Markdown {
  <T extends keyof JSX.IntrinsicElements = "div">(
    props: React.HTMLAttributes<T> & {
      as?: T;
      children?: string;
      inline?: boolean;
      options?: Omit<MarkedOptions, "async">;
    },
  ): JSX.Element;
}

export const Markdown: Markdown = ({
  as: Component = "div",
  children,
  inline,
  options,
  ...props
}) => {
  const html = useMemo(() => {
    const markdown = children ?? "";

    return {
      __html: (inline === true
        ? marked.parseInline(markdown, options)
        : marked.parse(markdown, options)) as string,
    };
  }, [children, inline, options]);

  // @ts-ignore
  return <Component dangerouslySetInnerHTML={html} {...props} />;
};