Unauthorized access. 'Send' claim(s) are required to perform this operation - Azure Queue Send Message

Question

We have been trying to send a test message to Azure Service Bus Queue from SPFx webpart, however, every time we are seeing --> Unauthorized access. 'Send' claim(s) are required to perform this operation. Resource: 'sb://.servicebus.windows.net/'.

Steps we have followed -

1. Created a sample SPFx webpart.
2. Used { "resource": "Microsoft.ServiceBus", "scope": "user_impersonation" } inside webApiPermissionRequests of package-solution.json.
3. Deployed the webpart and approved scopes from Admin center so that an Azure AD App service principal gets created with API Permissions.
4. Now migrated the Redirect Uris to SPA for PKCE flow (MSAL 2.0).
5. Set Allow Public Client Flows to "Yes".
6. Then got the client id and tenant id from AD App and used in our SPFx solution to connect Service Bus Queue through javascript SDK.
7. Used InteractiveBrowserCredential from @azure/identity and ServiceBusClient from @azure/service-bus to send a message to the Queue. Snippet below -

try{
      const credential = new InteractiveBrowserCredential({
          tenantId: "<tenant-id>",
          clientId: "<SharePoint Online Client Extensibility Web Application Principal client-id>"
      });
      const fullyQualifiedNamespace = "<servicebus-namespace>.servicebus.windows.net";
      const serviceBusClient = new ServiceBusClient(fullyQualifiedNamespace, credential);
      const sender = serviceBusClient.createSender("queue-name");
      await sender.sendMessages({body: "test"});
      console.log("message sent");
}
catch(error){
      console.log(error);
}

8. Provided Owner and Azure Service Bus Data Owner access from IAM to the Service Principal. Both queue and service bus level.

However, every time code block is throwing exception and the message is - Unauthorized access. 'Send' claim(s) are required to perform this operation. Resource: 'sb://.servicebus.windows.net/'.

Any help would be appreciated. Thanks !!