chrome.storage undefined in React chrome extension

Question

I am working on a chrome extension that renders a react app and appends it to the current webpage.

I have added the permissions to my manifest file:

// manifest.json    
"permissions": [
    "storage",
    "activeTab"
  ],

The app is appended to the webpage using the contents.ts file:

// contents.ts
if (!document.getElementById("mysecretid")) {
    const div = document.createElement("div");
    div.id = "mysecretid";
    document.body.appendChild(div);

    const script = document.createElement("script");
    script.src = chrome.runtime.getURL("controlPanel.js");

    document.body.parentElement.appendChild(script);
}

I tried using https://www.npmjs.com/package/use-chrome-storage?activeTab=readme npm package for storing data locally and my control panel component has a simple UI that uses the npm package as shown in their basic example like so:

import { useChromeStorageLocal } from "use-chrome-storage";

const ControlPanel = (): JSX.Element => {
    const [render, setRender] = useState(true);
    const locale = "en";

    const [value] = useChromeStorageLocal("counterLocal", 0);

    console.log("value is", value);

    return (
        <div>Some components...</div>
    );
};

But this results in the render tree crashing with the error:

Cannot read properties of undefined (reading 'onChanged')

Of the corresponding minified line:

return chrome.storage.onChanged.addListener(t),

Why is chrome.storage undefined in this case and how do to fix it?