Injecting elements in a page

[ptdatta]

Hello, I am new to WXT I was just exploring it.
I want to target an element on the youtube page and inject a button according to it. So I wrote this code

import React from "react"
import ReactDOM from "react-dom/client"
import { defineContentScript } from "#imports"
import { Button } from "@/components/analyze-button"

export default defineContentScript({
  matches: ["*://*.youtube.com/*"],
  main() {
    const observer = new MutationObserver(() => {
      const cards = document.querySelectorAll<HTMLElement>(
        "ytd-rich-item-renderer"
      )

      cards.forEach(card => {
        const menu = card.querySelector<HTMLElement>(
          ".yt-lockup-metadata-view-model__menu-button"
        )
        if (!menu) return

        if (card.querySelector(".my-btn")) return

        const wrapper = document.createElement("div")
        wrapper.className = "my-btn"
        menu.insertAdjacentElement("afterend", wrapper)

        const root = ReactDOM.createRoot(wrapper)
        root.render(<Button />)
      })
    })

    observer.observe(document.body, { childList: true, subtree: true })
  },
})

But it target's youtube's whole UI. Like the youtube logo isn't showing, the player icon's wasn't showing. Can anyone help me what I am doing wrong?