How to access browser tab information in react web extension?

I created my first firefox sidebar extension where, amongst other things I need access to the information of the tab I’m on. If I run the sidebar here I get the url of this page. If I toggle to another tab, the information on the sidebar changes.

manifest.js

{
    ...
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "run_at": "document_end",
            "js": [
                "content-script.js"
            ]
        }
    ],
    "background": {
        "persistent": false,
        "scripts": [
            "background.js"
        ]
    } 
    "sidebar_action": {
        "default_icon": "icon.png",
        "default_title": "testing sidebar sidebar",
        "default_panel": "index.html",
        "open_at_install": false
    }
}

background.js

browser.browserAction.onClicked.addListener(() => {  
  browser.sidebarAction.open();
});

With vanilla JS I could do this (and other event listeners)

browser.tabs.onActivated.addListener(function (activeInfo) {
    browser.tabs.get(activeInfo.tabId, function (tab) { 
      GetInitialInfo(tab);
    });
  });

I tried to do the following with react (to give you an idea of what I think I need)

function App() {
  if (browser) {
    browser.tabs.onActivated.addListener(function (activeInfo) {
      browser.tabs.get(activeInfo.tabId, function (tab) {
        console.log("tab change", tab);
        return (
          <div className="App">
            <header className="App-header">
              <p>This is a test</p>
            </header>
          </div>
        );
      });
    });
  } else {
    return <p>loading</p>
  }
}

But of course browser isn’t defined and so app doesn’t build.

Or is there some other way I could get my react app/firefox-sidebar to have access to the tab information.