Integrate paypal express checkout in my angular project

I am trying to integrate PayPal express checkout in my angular project but I am facing a very strange bug, Here is my code for PayPal integration. The issue is that Paypal button is not getting rendered in view whereas it is showing in element tab of chrome. And in console log of ngAfterViewChecked, I am always getting false.

this.paypalConfig = {
      env: 'sandbox',
      client: {
        sandbox: 'key here',
        // production: '<your-production-key here>'
      },
      commit: true
   }

private loadExternalScript(scriptUrl: string) {
    this.addScript = true;
    return new Promise((resolve, reject) => {
      const scriptElement = document.createElement('script')
      scriptElement.src = scriptUrl
      scriptElement.onload = resolve
      document.body.appendChild(scriptElement)
    })
  }
  ngAfterViewChecked(){
    const elementExists = !!document.getElementById('paypal-checkout-btn');
    console.log(elementExists);
    if (elementExists && !this.addScript) {
      this.loadExternalScript("https://www.paypalobjects.com/api/checkout.js").then(() => {
        paypal.Button.render(this.paypalConfig, '#paypal-checkout-btn');
        this.paypalLoad = false;
      });
    }
  }

Here is the screenshot:- enter image description here