ReactDOMServer not render to react-twitter-embed

Question

I'm trying to render embed tweets with ReactDOMServer.renderToString but it doesn't work. I'm using react-twitter-embed npm package.

I also tried with another jsx functions it works. But tweet embed doesn't work. My code and demo in below;

Codesandbox demo

Doesn't work.

  tweet = x =>
    ReactDOMServer.renderToStaticMarkup(
      <div>
        <TwitterTweetEmbed tweetId={x} />
      </div>
    );

Works

icon = x => ReactDOMServer.renderToString(<FaTags size={x} />);

Full Code

import React, { Component, Fragment } from "react";
import ReactDOMServer from "react-dom/server";
import { TwitterTweetEmbed } from "react-twitter-embed";
import { FaTags } from "react-icons/fa";
import { render } from "react-dom";

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
  }
  tweet = x =>
    ReactDOMServer.renderToStaticMarkup(
      <div>
        <TwitterTweetEmbed tweetId={x} />
      </div>
    );
  icon = x => ReactDOMServer.renderToString(<FaTags size={x} />);
  render() {
    let tweetxx = "[tweet]1216022644614545409[/tweet]";
    let tweetx = tweetxx.replace(/\[tweet\]([0-9]{1,}?(?=\[\/tweet\]))\[\/tweet\]/g,"$1");

    return (
      <Fragment>
        <span>Doesn't work</span>
        <div dangerouslySetInnerHTML={{ __html: this.tweet(tweetx) }} />
        <hr />
        <span>Works</span>
        <div dangerouslySetInnerHTML={{ __html: this.icon(40) }} />
        <hr />
        <span>Works (Directly)</span>
        <br />
        <span>{tweetxx}</span>
        <br />
        <span>{tweetx}</span>
        <TwitterTweetEmbed tweetId={tweetx} />
      </Fragment>
    );
  }
}

render(<App />, document.getElementById("root"));