How can I use gmail-js to add my extension button in the toolbar? - reactjs

Question

I need to add my chrome extension button to the toolbar, I found the Gmail-js
gmail.tools.add_toolbar_button('<div id="icon_placeholder"></div>', function () { }, 'temp_css')
and it adds the button but if I go to another folder, it vanishes (if I inspect it, the element is still there, just invisible).
Another problem is if I start from inside a message or from another folder (hard refreshing the page) and then going to inbox, it won't show up.
How can I use the gmail-js to render and persist the button there? it'd be ok if it only shows up on inbox, as long as it's there (on inbox) no matter what folder start browsing from
I tried just rendering the button and checking to see if:
The element is not present in the page, if so, render it (doesn't seem to be working)
Check if the page was refreshed, if so, render (doesn't seem to be working)
Here's a piece of the code I have so far:
const gmail = new GmailFactory.Gmail() as Gmail;
var btn = gmail.tools.add_toolbar_button('<div id="icon_placeholder"></div>', function () { }, 'temp_css').get(0)['className'];
const getElement = document.querySelectorAll('.' + btn.toString().replace(' ', '.'))[5]
console.log('getElement ' + getElement.getAttribute('class'))
var app: HTMLElement = document.createElement('div') as HTMLElement;
var pos: HTMLElement = getElement as HTMLElement;
if (pos !== null) {
pos.appendChild(app);
ReactDOM.render(<IconExtChrome />, app);
}
function refreshButton(): boolean {
if (!getElement) {
pos.appendChild(app);
ReactDOM.render(<IconExtChrome />, app)
return false
}
}
if (sessionStorage.getItem('reloaded') != null) {
console.log('page was reloaded');
pos.appendChild(app);
ReactDOM.render(<IconExtChrome />, app)
} else {
console.log('page was not reloaded');
}
sessionStorage.setItem('reloaded', 'yes');
refreshButton()```