How can a Facebook api script loaded in a website if not in header?

In Next.js, in _document.tsx I have following line:

<Script strategy="lazyOnload" id="facebook-api">
{`
    window.fbAsyncInit = function() {
        FB.init({
          appId      : '${fbAppId(process.env.NEXT_PUBLIC_ENVIRONMENT)}',
          cookie     : true,
          xfbml      : true,
          version    : 'v14.0'
        });
          
        FB.AppEvents.logPageView(); 
    };
    (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.js";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
      `}
</Script>

How can I put same in a Wordpress shortcode? It should belong to the shortcode, I can not ask each of the clients to put it in the header.

I tried to put <script> before the Facebook login button. Yes, normally it is in Head, but as I know it can be also in body. anyway it raise an error in this line: __html:

Uncaught TypeError: Cannot read properties of undefined (reading 'login')

            <script
                dangerouslySetInnerHTML={{
                    __html: `
                    window.fbAsyncInit = function() {
                        FB.init({
                          appId      : '${fbAppId(env ?? process.env.NEXT_PUBLIC_ENVIRONMENT)}',
                          cookie     : true,
                          xfbml      : true,
                          version    : 'v14.0'
                        });
                          
                        FB.AppEvents.logPageView(); 
                    };
                    (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.js";
                        fjs.parentNode.insertBefore(js, fjs);
                      }(document, 'script', 'facebook-jssdk'));
                    `,
                }}
            />
            <button
                className={`${styles.button} ${styles.facebookBtn}`}
                onClick={() => {
                    window.FB.login(function (res: any) {