InboxSDK To load React application inside gmail webpage

I am stuck at the following and i really need some help to solve this issue
i am building a react app using InboxSDK and this is my code in the App.js File

/* eslint-disable react/jsx-no-undef */
/* eslint-disable no-undef */
/*global chrome*/
   import React from "react"
   import ReactDOM from "react-dom"
   import App from "./components/App"

   InboxSDK.load(2, "sdk_lettersnumbers_9b96f6fcb7").then(function (sdk) {
     alert("t");
    sdk.Toolbars.registerThreadButton({
    title: "React button",
    iconUrl: chrome.extension.getURL("/") + "images/logo192.png",
    hasDropdown: true,
    onClick: function (event) {

        ReactDOM.render(<App />, event.dropdown.el);

        event.dropdown.once('destroy', () => (
            ReactDOM.unmountComponentAtNode(event.dropdown.el)
        ));
      }
   });
})

A screenshot of the application files tree is the following

enter image description here

the complete project can be found at this link: https://drive.google.com/drive/u/0/folders/1EHPmF9Mkql6sdjMf2hT6HVpUqpEFVea9

my issue is that the add-in is not being loaded when i go to gmail website
it should show here
enter image description here