I'm creating a web extension on Firefox using React

When I click on a button, a callback is called:

browser.runtime.sendMessage({ type: "auth", url: "url" })
    .then((response) => {
      console.log("Response:", response);
    })
    .catch((error) => {
      console.error("Error:", error);
    });

And, the background script is listening and indeed receives the message:

browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.type === "auth") {
      browser.identity.launchWebAuthFlow({ url: message.url, interactive:true })
        .then((responseUrl) => {
          console.log("callback!")
          sendResponse({ success: true, url: responseUrl });
        })
        .catch((error) => {
          sendResponse({ success: false, error: error.message });
        });
  
      return true;
    }
  });

The OAuth call is going fine, the callback is called and the log "callback!" can be seen. But the message is never received back on React side

Here is my manifest:

{
  "manifest_version": 2,
  "name": "Open Link Extension",
  "version": "1.0",
  "description": "An extension that opens a link when a button is clicked.",
  "permissions": [
    "tabs",
    "identity",
    "activeTab",
    "webRequest",
    "<all_urls>",
    "cookies"
  ],
  "browser_action": {
    "default_popup": "html/popup.html"
  },
  "background": {
    "scripts": [
      "src/background.js"
    ],
    "persistent": false
  },
  "icons": {
    "48": "icon.png"
  }
}

Thanks for your help!