Cors error while rendering FB Chat plugin for whitelisted domains

I am trying to add the Messenger Live Customer Chat Plugin dynamically to a site by first whitelisting the domain via the API and then injecting the script tag to the whitelisted domain site.

Now, after injecting the script to the whitelisted site it fails with CORS error. But, if I manually whitelist the URL via the Facebook app using the UI it works fine. I dont understand why does whitelisting via API does not work when the docs clearly say it should work.

  1. Successfully whitelisting a domain for a FB page via the API
curl 'https://graph.facebook.com/v12.0/me/messenger_profile?access_token=EAxxxxxxxPr' 
  -H 'authority: graph.facebook.com' 
  -H 'sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96"' 
  -H 'accept: application/json, text/plain, */*' 
  -H 'content-type: application/json' 
  -H 'sec-ch-ua-mobile: ?0' 
  -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36' 
  -H 'sec-ch-ua-platform: "macOS"' 
  -H 'origin: https://livechat.frangout.com' 
  -H 'sec-fetch-site: cross-site' 
  -H 'sec-fetch-mode: cors' 
  -H 'sec-fetch-dest: empty' 
  -H 'referer: https://livechat.frangout.com/' 
  -H 'accept-language: en-GB,en-US;q=0.9,en;q=0.8' 
  --data-raw '{"whitelisted_domains":["https://my-domain.com"]}' 
  --compressed

Result: {success: true } and I can also GET the whitelisted_domains and see it is already whitelisted

  1. Injecting script dynamically to the whitelisted site so that it loads the Messenger Live Chat Plugin
        var fbCustomerChat = document.createElement('div');
        fbCustomerChat.id = "fb-customerchat";
        fbCustomerChat.classList.add("fb-customerchat");
        fbCustomerChat.setAttribute('page_id', 'xxx')
        document.body.appendChild(fbCustomerChat);

        window.fbAsyncInit = function() {
            FB.init({
              appId            : 'xxx',
              autoLogAppEvents : true,
              xfbml            : true,
              version          : 'v12.0'
            });
        };

        (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 = "https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
  1. Browser Logs

Access to XMLHttpRequest at 'https://www.facebook.com/plugins/customer_chat/facade_gating/?page_id=106040728582517&suppress_http_code=1' from origin 'https://sid-s-school-12f2.thinkific.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
xhr-patch.js:87 GET https://www.facebook.com/plugins/customer_chat/facade_gating/?page_id=106040728582517&suppress_http_code=1 net::ERR_FAILED 200

Access to XMLHttpRequest at 'https://www.facebook.com/plugins/customer_chat/SDK/trucnated co

Refused to frame 'https://www.facebook.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://www.facebook.com".