How to have access to a variable inside a React Component

I have a React component DocumentEditor, which has a property container that store its content.

import React from './../../../node_modules/react';
import ReactDOM from './../../../node_modules/react-dom/client';
import {DocumentEditorContainerComponent, Toolbar, } from "./../../../node_modules/@syncfusion/ej2-react-documenteditor";
import { TitleBar } from "./title-bar";
import "./default.component.css";

DocumentEditorContainerComponent.Inject(Toolbar);

function DocumentEditor(props) {
  let hostUrl = "https://services.syncfusion.com/react/production/api/documenteditor/";
  let container;
  let titleBar;

  function rendereComplete() {
    window.onbeforeunload = function () {
      return "Want to save your changes?";
    };

    container.documentEditor.pageOutline = "#E0E0E0";
    container.documentEditor.acceptTab = true;
    container.documentEditor.resize();

    titleBar = new TitleBar(
      document.getElementById("documenteditor_titlebar"),
      container.documentEditor,
      true
    );
    onLoadDefault();
  }

  return (
    <div className="control-pane">
      <div className="control-section">
        <div id="documenteditor_titlebar" className="e-de-ctn-title"></div>
        <div id="documenteditor_container_body">
          <DocumentEditorContainerComponent
            id="container"
            ref={(scope) => {
              container = scope;
              rendereComplete();
            }}
            style={{ display: "block" }}
            height={"590px"}
            serviceUrl={hostUrl}
            enableToolbar={true}
            locale="en-US"
          />
        </div>
      </div>
    </div>
  );

  function onLoadDefault() {
    container.documentEditor.open(JSON.stringify(props.value));
    container.documentEditor.documentName = "Getting Started";
    titleBar.updateDocumentTitle();
    container.documentChange = () => {
      titleBar.updateDocumentTitle();
      container.documentEditor.focusIn();
    };
  }
}

export default DocumentEditor;

Besides I have a component DocumentEditorCOntainer that is responsable to initialize the component DocumentEditor

import React from './../../../node_modules/react';
import ReactDOM from './../../../node_modules/react-dom/client';
import DocumentEditor from './DocumentEditor';


const DocumentEditorContainer = (props) => {
    const root = ReactDOM.createRoot(document.getElementById(props.container));
    root.render(
      <React.StrictMode>
        <DocumentEditor value = {props.value}/>
      </React.StrictMode>
    );
}

window.DocumentEditorContainer = DocumentEditorContainer;

Those components are consumed inside a JSF page. This page has a button save that assign the content of DocumentEditor to a bean, My question is, how do I have access to the variable container of DocumentEditor from the JSF page?