ReactDOMServer not render to react-twitter-embed - reactjs

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"));