Remove Chrome extension context menu then re-adding it

NOTE: this DOES NOT answer my question as I have to dynamically change the menus every once in a while and CANNOT install the menus in the onInstalled event as highlighted in the question mentioned above. Also, my question is more "why can I not recreate menu AFTER REMOVAL", which the above question does not address.

I have a peculiar problem. My extension, which uses Manifest 3 and Service Workers, loads a set of context menu upon loading, aka the context menu code is written in top level of Service Worker.

The code is like this:

reloadContextMenu()
async function reloadContextMenu() {
    await new Promise(r => {
        chrome.contextMenus.removeAll(r)
    })

    chrome.contextMenus.create({
        title: 'Do Action',
        id: 'do_action',
        contexts: ['link']
    })
    ...
}

Each time I refresh the extension though, I get the warning Unchecked runtime.lastError: Cannot create item with duplicate id do_action. I've also tried running chrome.contextMenus.removeAll() manually in the console(after which I confirm the menu is gone), then running reloadContextMenu() manually(after which I see the menu), and I still get the same error.

I've added logs to confirm reloadContextMenu is NOT called more than once. It seems like even after I remove a menu I still cannot reuse its ID? Any help would be appreciated. Thanks !