How can I reference a parent element of #plasmo-shadow-container when a button inside the CSUI component is clicked?

[uri3000]

I created the following gmail compose view toolbar for the sake of this example.
It has a button, when clicked I would like to have the compose textarea filled with my own injected text.

In order to do this I need to "climb up" the DOM by calling toolbarRef.parentElement.parentElement... until I reach the #plasmo-shadow-container and then get its parent. however (div#plasmo-shadow-container).parentElement is null.

This is how it looks like:

This is the code:

import React, { useEffect, useState, useRef } from 'react';
import type { PlasmoCSConfig, PlasmoGetInlineAnchor, PlasmoGetStyle } from "plasmo";
import type { generateKey } from "crypto";
import { renderToString } from 'react-dom/server';
import createCache from "@emotion/cache";
import { CacheProvider } from "@emotion/react";
import { ToolbarButton, GoogleSuggestionButton, ComposeToolbar } from './content.styled';

export const config: PlasmoCSConfig = {
  matches: ["https://mail.google.com/*"],
  run_at: "document_end"
  }

  const styleElement = document.createElement("style");

  const styleCache = createCache({
    key: "plasmo-emotion-cache",
    prepend: true,
    container: styleElement
  });

  export const getStyle = () => styleElement;

export const getInlineAnchorList = () => document.querySelectorAll(".bAs");

const GmailTestInline = () => {
  const toolbarRef = useRef(null);

  useEffect(() => {
  }, []);

  const insertText = async () => {
    let parent = toolbarRef.current;
    console.log(toolbarRef); 
    // THE ISSUE: When going up the ladder for the toolbarRef by calling toolbarRef.parent.parentElement.parentElement... this reaches #plasmo-shadow-container and then the parentElement is null. How do I get the actual parent of #plasmo-shadow-container?
  };

    return (
      <CacheProvider value={styleCache}>
        <ComposeToolbar ref={toolbarRef}>
          <GoogleSuggestionButton
          onClick={insertText}>
            ⚡️ Inject text to compose... 
          </GoogleSuggestionButton>
        </ComposeToolbar>

      </CacheProvider>
    );
  }
  
export default GmailTestInline;

[uri3000]

Figured it out, incase anyone needs something like this:

import React, { useEffect, useState, useRef } from 'react';
import type { PlasmoCSConfig, PlasmoGetInlineAnchor, PlasmoGetStyle } from "plasmo";
import type { generateKey } from "crypto";
import { renderToString } from 'react-dom/server';
import createCache from "@emotion/cache";
import { CacheProvider } from "@emotion/react";
import { ToolbarButton, GoogleSuggestionButton, ComposeToolbar } from './content.styled';

export const config: PlasmoCSConfig = {
  matches: ["https://mail.google.com/*"],
  run_at: "document_end"
  }

  const styleElement = document.createElement("style");

  const styleCache = createCache({
    key: "plasmo-emotion-cache",
    prepend: true,
    container: styleElement
  });

export const getStyle = () => styleElement;

export const getInlineAnchorList = () => document.querySelectorAll(".bAs");

const GmailTestInline = () => {
  const toolbarRef = useRef(null);

  useEffect(() => {
    // getBoundingClientRect - set modal position
    // pass through the element
    alert('hey');
  }, []);

  const insertText = async () => {
    //element.getRootNode().host
    let parent = toolbarRef.current.getRootNode().host.parentElement;

    while (parent !== null && parent.classList.contains('I5')) {
      console.log(parent.classList);
      parent = parent.parentElement;
    }
    
    if (parent) {
       parent.querySelector('.uC').click();
       console.log(parent.querySelector('.gmail_quote'));
       parent.querySelector('.gmail_quote')
    }
  };

    return (
      <CacheProvider value={styleCache}>
        <ComposeToolbar ref={toolbarRef}>
          <GoogleSuggestionButton
          onClick={insertText}>
            ⚡️ Inject text to compose... 
          </GoogleSuggestionButton>
        </ComposeToolbar>

      </CacheProvider>
    );
  }
  
export default GmailTestInline;