Флажок Facebook Messenger остается скрытым даже после настройки webhook и добавления уникального user_ref

Question

Я пытаюсь интегрировать API мессенджера Facebook после этой документации https://developers.facebook.com/docs/messenger-platform/discovery/checkbox-plugin

Я уже пытался установить флажок Facebook на нашем сайте, и, честно говоря, он работает просто как шарм.

вот код, который я использовал для компонента preact.

Зарегистрировать фб init

  window.fbAsyncStack = [];
                window.fbAsyncInit = function() {
                    console.log('this has been rendered');
                    FB.init({
                        {#appId            : '{{ facebook_app_id }}',#}
                        appId: '489987305072387',
                        autoLogAppEvents : true,
                        xfbml            : true,
                        version          : 'v2.11'
                    });

                    window.fbAsyncStack.forEach(function(fn) {
                        fn();
                    });

                    window.fbAsyncInitFired = true;
                };

                (function(d, s, id){
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (d.getElementById(id)) {return;}
                    js = d.createElement(s); js.id = id;
                    js.src = '{{ facebook_sdk_url }}';
                    fjs.parentNode.insertBefore(js, fjs);
                }(document, 'script', 'facebook-jssdk'));

                window.fbAsyncStack.push(function() {
                    FB.XFBML.parse();
                });

событие my did mount

 fbEventSubscibe(){
        window.FB.Event.subscribe('messenger_checkbox', function(e) {
            console.log("messenger_checkbox event");
            console.log(e);

            if (e.event == 'rendered') {
                console.log("Plugin was rendered");
            } else if (e.event == 'checkbox') {
                var checkboxState = e.state;
                console.log("Checkbox state: " + checkboxState);
            } else if (e.event == 'not_you') {
                console.log("User clicked 'not you'");
            } else if (e.event == 'hidden') {
                console.log("Plugin was hidden");
            }

        });
    }

    componentDidMount(){
        if(typeof window.fbAsyncInit === "undefined") {
            window.fbAsyncInit = () => {
                console.log("window fb not init");
                window.FB.init({
                    appId      : 'xxxx',
                    xfbml      : true,
                    version    : 'v2.6'
                });
                this.fbEventSubscibe();
            };

        } else {
            console.log("window fb init");
            this.fbEventSubscibe();
        }
    }

Мой div визуализировать событие

div className={"fb-messenger-checkbox"}
                             origin={props.facebookOriginDomain}
                             page_id={"xxxxx"}
                             messenger_app_id={"xxxxx"}
                             user_ref={Math.random().toString(36).slice(-5)}
                             allow_login={"true"}
                             size={"medium"}
                             skin={"light"}
                             center_align={"true"}>
                        </div>

Вот фактический результат из журнала консоли

{event: "hidden", user_ref: "xbjr3", ref: null, pluginID: undefined}
event: "hidden"pluginID: undefinedref: null user_ref: "xbjr3"__

Plugin was hidden