Accessing Cookies API from a React WebExtension - reactjs

Question

Summary
I'm trying to access the Cookies API from a WebExtension which uses React, but I don't know why, it throws a TypeException, as if browser.cookies did not exist.
I've checked permissions and the code is copy/pasted from the MDN docs... but still I can't get it to work.
Exception:
TypeError: browser.cookies is undefined
Code
This is the main component:
import React from 'react';
import ReactDOM from 'react-dom';
class Popup extends React.Component {
constructor(props) {
super(props);
this.state = { sessionId: null };
}
componentDidMount() {
var getting = browser.cookies.getAllCookieStores(); // This throws "TypeError: browser.cookies is undefined"
getting.then(logStores);
}
render() {
return (
<div>
<h1>My App</h1>
</div>
);
}
logStores(cookieStores) {
for (let store of cookieStores) {
console.log(`Cookie store: ${store.id}\n Tab IDs: ${store.tabIds}`);
}
}
}
ReactDOM.render(<Popup />, document.getElementById('app'));
And this is the manifest.json with the according permissions:
{
"manifest_version": 2,
"name": "MyApp",
"version": "1.0",
"browser_action": {
"browser_style": true,
"default_icon": {
"48": "images/Watermelon-48.png",
"96": "images/Watermelon-96.png"
},
"default_title": "MyApp",
"default_popup": "popup.html"
},
"permissions": ["browser", "cookies","<all_urls>","tabs"]
}

Answer 1

could you replace
"permissions": ["browser", "cookies","<all_urls>","tabs"]
By
"permissions": ["browserSettings", "cookies","<all_urls>","tabs"]