Creating and appending div element in getRootContainer results in infinite mounting loop

[blhutchings]

Hello all,
I'm trying to inject directly into the DOM to inherit the pages styles.
But I need to create a new div inside my target first so the sibling elements are not destroyed on mounting.

The general structure is

<div id="category-container">
    <div>
        <form id="category-selector>
        ...
        </form>
    </div>
    <game-form-container> // This element gets added & removed so I want my root container inside of it. So this is the anchor
        <game-form-search>
            ...
        <game-form-search>
        // I want root here, I can't mount to the parent because <game-form-search> would be destroyed so I need to create a <div>
    </game-form-container>
</div>

So I override getRootContainer based on the with-content-scripts-ui root container example

export const getRootContainer: PlasmoGetRootContainer = (props) =>
    new Promise((resolve) => {
        const checkInterval = setInterval(() => {
            const rootContainerParent = props.anchor.element;
            if (rootContainerParent) {
                clearInterval(checkInterval)
                const rootContainer = document.createElement("div")
                rootContainer.id = "my-id"
                rootContainerParent.appendChild(rootContainer)
                resolve(rootContainer)
            }
        }, 137)
    })

The rest of the content script is

// My custom ID for root container dismount
export const getShadowHostId: PlasmoGetShadowHostId = () => "my-id"

// I want it to be inline, not a overlay
export const getInlineAnchor: PlasmoGetInlineAnchor = async () => {
    const category = document.getElementById("category-container");
    return category ? category.querySelector("game-form-search") : null;
}

const SampleText = () => <span>Hello</span>
export default SampleText 

The div does get mounted from getRootContainer

<div id="my-id">
    <div id="plasmo-inline" class="plasmo-csui-container" style="display: flex; position: relative; top: 0px; left: 0px;">
        <span>Hello</span>
    </div>
</div>

But the life cycle does not seem to recogize it so it continuously runs.
It's stuck in a loop so it keeps spawning more and I don't know why.
I just want to create a div and insert my component in it.

Thanks