Why is Facebook Group plugin not showing up in React?

Question

Facebook

Can you please tell me why the group is not displayed in the following example? If you remove the if, then everything is rendered correctly.
Add after body:

<div id="fb-root"></div>
    <script crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.3&appId=2406343689634903&autoLogAppEvents=1"></script>

app.js:

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            loading: false
        }
    }
    componentDidMount = () => {
        setTimeout(() => this.setState(prevState => ({...prevState, loading: true})), 5000);
    };
    render = () => {
        let main = <div>test</div>;

        if (this.state.loading) {
            main = (
                <div className="fb-group" data-href="https://www.facebook.com/groups/ayearofrunning/" data-width="280"
                     data-show-social-context="true" data-show-metadata="false" />
            );
        }
        return main
    }
}

Answer 1

You are adding content after the sdk script has been initialized. Of course nothing works for you.
Study the sdk, they should have a way to access the global object and a method to re-parse the page. If this can only be done through the initialization hook, then custom events will have to be dispatched. There is a react-facebook
wrapper on github . Perhaps she will suit you.