Logging in via Facebook Messenger login connect flow isn't working correctly

Question

I want to utilize Facebook Messenger login connect flow in my web application - https://developers.facebook.com/docs/facebook-login/login-connect/

For that, I've created a test app and set up an initial page in the "messenger" section.

And I have, basically, this code (shown partially):

<script async='' defer='' crossorigin='anonymous' src='https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v10.0&appId=<skipped>&autoLogAppEvents=1' nonce='<skipped>' />

and

window.fbAsyncInit = function() {
  window.FB.init({
    appId: "<skipped>",
    autoLogAppEvents: true,
    xfbml: true,
    version: "v10.0"
  });

  window.FB.getLoginStatus(function(response) {
    // Called after the JS SDK has been initialized.
    console.log("Inside window.FB.getLoginStatus");
    statusChangeCallback(response); // Returns the login status.
  });
};



function loginUsingJSSDKLoginDialog() {
  console.log("Inside loginUsingJSSDKLoginDialog");
  window.FB.login(
    function(response) {
      if (response.status === "connected") {
        window.FB.api("/me", function(response) {
          console.log("Successful login for: " + response.name);
          var element = document.getElementById("status");
          document.getElementById("status").innerHTML =
            "Thanks for logging in, " + response.name + "!";
        });
      } else {
        document.getElementById("status").innerHTML = "You are not logged in!";
      }
    },
    {
      scope: "public_profile,email,user_messenger_contact",
      messenger_page_id: "<skipped>",
      reset_messenger_state: true
    }
  );
}

An issue is that the login dialog that'll pop up won't be the one of Messenger but the standard Facebook login one.

Why is that? How to fix it?

What I need is, as mentioned, "Facebook Messenger login connect flow"