Use external javascript library only in specific child LWC instead of including in VF page

Question

I am trying to use an external JS library for feedback purpose. When I use the library in a VF page using <script> tag by including src="js URL", it works well and I can inspect and see the library.

VF code

<script type="text/javascript" src="https://feedback.smg.com/etrackjslibrary" async="true"></script>
    <apex:includeLightning />
    <div id="LightningComponentid" />
    <script>
$Lightning.use("c:LWCApp", function () {
            $Lightning.createComponent("c:MainPage",
                {
                    "name" : name
                },
                "lwcId",
                function (cmp) {
                });
        });
    </script>

We have embedded LWC inside the VF page and LWC Parent contains a number of child components, Now the ask is to enable the external js library only on a specific child component, so I have made below changes

1. Removed script tag from VF page.
2. Created static resource and added js in it.
3. Child component changes

Parent Component

<template>
<c-childLWC>
</template>

Child Template

<template>
    <div lwc:dom="manual"></div>
{template code}
</template>

Child JS

import { loadScript } from 'lightning/platformResourceLoader';
import surveyFeedback from '@salesforce/resourceUrl/surveyFeedback';

renderedCallback() {
      console.log('inside renderedCallback');
      Promise.all([
          loadScript(this, surveyFeedback)
      ]).then(() => {
          console.log('Feedback called');
      }).catch(error => {
          console.log('Error loading feedback', error);
      });
  }

When navigated to the child component and inside renderedCallback it always goes to catch block and throws error as undefined.

Firefox Network screenshot

When using in VF page, the js gets executed by including the script tag and I can see the button which the js adds in the inspector.