How to connect React for messaging with Chrome Extension?

Question

JavaScript

React:

componentDidMount() {
let connectApp = chrome.runtime.connect(
      "akoibdefdsfdfdfdffdsfsfsgdsgdsgmf",
      {
        name: "test",
      }
    );

    connectApp.onMessage.addListener((msg, sender, sendResponse) => {
      console.log(msg);
    });

    connectApp.onDisconnect.addListener((obj) => {
      console.log("disconnected port", obj);
    });
}

background.js

chrome.runtime.onConnect.addListener(function (obj) {
  console.log("onConnect");
});

manifest.json

{
  "manifest_version": 2,
  "name": "test",
  "version": "1.1.0",
  "description": "test Description",
  "browser_action": {},
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "content_scripts": [
    {
      "matches": ["*://mail.google.com/*"],
      "js": ["content.js"]
    }
  ],
  "externally_connectable": {
    "ids": ["*"],
    "matches": [
      "https://localhost:3000/*",
      "http://localhost:3000/*"
    ],
    "accepts_tls_channel_id": false
  },
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "permissions": [
    "tabs",
    "activeTab",
    "https://*/*",
    "http://*/*"
  ]
}

error: