Can't access other elements outside the plasmo-csui shadow root

export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () => {
  const anchors = document.querySelectorAll('[data-testid="bookmark"]')

  return Array.from(anchors).map((element) => {
    return {
      element,
      insertPosition: "beforebegin"
    }
  })
}

const CreateBookmark = () => {
  const { openToast } = useToastContext()
  const { isOpen, onOpen, onClose } = useDisclosure()
  const [tweetLink, setTweetLink] = React.useState<string>("")


  const openModal = (event: React.MouseEvent<HTMLButtonElement>) => {
    event.stopPropagation()
    event.preventDefault()

    const url = event.currentTarget.closest('[data-testid="bookmark"]').getAttribute("data-tweet-link")

    setTweetLink(url)
  }

  return (
    <ChakraProvider>
      <Button
        type="button"
        onClick={openModal}
        style={{
          background: "#8e3dff",
          height: "30px",
          width: "100%",
          border: "none",
          color: "#fff",
          fontSize: "14px",
          borderRadius: "18px",
          textTransform: "capitalize",
          margin: "0 22px",
          cursor: "pointer",
          fontWeight: "bold"
        }}>
        bookmark
      </Button>
    </ChakraProvider>
  )
}