How to get TinyMCE textarea scrollTop in React

Question

I've been searching for a long time, but there's no way. In my project, I try to create a <div> which include a TinyMCE <textarea> and calculate lines div like this.

React version: 18.2.0

Tinymce version:

"node_modules/@tinymce/tinymce-react": {
  "version": "3.13.0",
  "resolved": "https://registry.npmjs.org/@tinymce/tinymce-react/-/tinymce-react-3.13.0.tgz",
  "dependencies": {
    "prop-types": "^15.6.2",
    "tinymce": "^5.5.1"
  },

<div className="update-editor-container">
  <div
    ref={(editor) => (this.update_editor = editor)}
    className="update-editor-conetent"
  >
    <Editor
      onInit={(evt, editor) => (this.update_editor.current = editor)}
      apiKey="k1uty67fxs2o3zv9r8qxnt7zedecyqle440gsgqmcdsdknib"
      //onKeyDown={(e)=>this.test(e)}
      onEditorChange={this.updateContent}
      initialValue={init_value}
      //scriptLoading={{async:true}}
      init={{
        content_css: '/index.css',
        body_id: 'eq',
        body_class: 'eq',
        selector: 'textarea',
        language: 'zh_TW',
        height: '80vh',
        plugins: 'image code wordcount ',
        statusbar: false,
        theme_advanced_background_colors: 'FF00FF',
        toolbar: 'undo redo | link image | code |',
        automatic_uploads: true,
        content_style: 'body {background-color:black;color:blue}',
        images_upload_handler: this.images_upload_handler,
        extended_valid_elements: 'Test',
        custom_elements: 'Test',
        setup: (editor) => {
          editor.on('init', function (e) {
            this.getBody().style.overflowY = 'scroll';
          });
          //editor.on('ScrollContent', this.onEditorScroll)
          editor.on('', () => this.onEditorScroll(editor));
        },
      }}
    />
  </div>
  <RowPreview content={this.props.content} label_list={this.props.label_list} />
</div>

then I want. When <textarea> onscroll I can get scroll value then lines div can scroll same value. but on my this.onEditorScroll I try following to get.

onEditorScroll = (e) => {
  const editor_id = e.id;

  console.log(
    document.getElementById(editor_id + "_ifr").contentDocument.body
      .offsetHeight,
  );
  console.log(
    document.getElementById(editor_id + "_ifr").contentDocument.body.scrollTop,
  );
};

scrollTop always returns 0.

Following is my search keyword:

1. React TinyMCE get scroll value
2. TinyMCE document.getElementById scrollTop
3. document.getElementById scrollTop always returns 0 etc..

I already tried some ways.

1. Set iframe and parents div to fixed size => same return 0
2. Try to document.getElementById(editor_id + "_ifr").scrollTop => same return 0
3. Use ref this.update_editor.scrollTop => same return 0
4. e.targetElm => same return 0

I'm not sure if my design works, but it doesn't seem to keep me trying.

So I wanted to ask have any way to solve this, or I require to give up this idea? or same similar aritcle can share me to study. Thanks