Multiple root containers question

export const getRootContainer = () =>
  new Promise((resolve) => {
    const checkInterval = setInterval(() => {
      const desktopContainerParent = document.querySelector(
        "div.desktopOnly span.topBarDetails span.delegatesShortcut.clickable"
      )
      if (desktopContainerParent) {
        clearInterval(checkInterval)
        const desktopRootContainer = document.createElement("span")
        desktopContainerParent.after(desktopRootContainer)
        resolve(desktopRootContainer)
      }
    }, 137)
  })

export const render: PlasmoRender<PlasmoCSUIJSXContainer> = async ({ createRootContainer }) => {
  const rootContainer = await createRootContainer()
  const root = createRoot(rootContainer)
  root.render(<OilOverlay />)
}

export const getRootContainer = () =>
  new Promise((resolve) => {
    const checkInterval = setInterval(() => {
      const desktopContainerParent = document.querySelector(
        "div.desktopOnly span.topBarDetails span.delegatesShortcut.clickable"
      )
      if (desktopContainerParent) {
        clearInterval(checkInterval)
        const desktopRootContainer = document.createElement("span")
        desktopContainerParent.after(desktopRootContainer)
        resolve(desktopRootContainer)
      }
    }, 137)
  })

export const render: PlasmoRender<PlasmoCSUIJSXContainer> = async ({ createRootContainer }) => {
  const rootContainer = await createRootContainer()
  const root = createRoot(rootContainer)
  root.render(<OilOverlay />)
}

div.mobileOnly span.topBarDetails span.delegatesShortcut.clickable

div.mobileOnly span.topBarDetails span.delegatesShortcut.clickable