How to Perform document.write the Highlighted Text in Chrome Extension with ReactJS

I am currently building a simple extension that can retrieve the highlighted text in chrome page and then write down the highlighted text in iframe using following codes:

popup.html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            body {
                width: 400px;
                height: 500px;
            }
            iframe {
                width: 400px;
                height: 500px;
            }
        </style>
    </head>
    <body>
        <iframe frameborder="1"></iframe> <!--'1' for border on/ '0' for border off-->
        <script type="text/javascript" src="popup.js"></script>
    </body>
</html>

popup.js

chrome.tabs.executeScript( {
    code: "window.getSelection().toString();"
}, function(selection) {
    document.write(selection[0])
});

manifest.json

{
  "manifest_version": 2,

  "name": "txls_demo",
  "description": "retrieve highlighted text then return the summarized result",
  "version": "1.0.0",
  "icons": {
    "16": "favicon.png",
    "48": "favicon.png",
    "128": "favicon.png"
  },

  "permissions": [
    "activeTab"
  ],
  "browser_action": {
    "default_icon": "favicon.png",
    "default_popup": "popup.html"
  }
}

These codes successfully copy the highlighted text and write those on given size of iframe.

However, I'd like to reproduce the same functionality with react.js in chrome extension, thus has tried following codes inside of the project dir after perform npx react create app project

manifest.json

  "name": "txls_demo",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "index.html",
    "default_icon": "favicon.png"
  },

  "permissions": [
    "activeTab"
  ],

  "version": "1.0"
}

App.js

import React, { Component } from 'react';

function Iframe(props) {
    return (<div dangerouslySetInnerHTML={ {__html:  props.iframe?props.iframe:""}} />);
}


const iframe = '<iframe frameborder="1" width="400" height="500"></iframe>';

class App extends Component {
    constructor(props) {
        super(props);
    }

    get_highlight() {
        /*global chrome*/
        chrome.tabs.executeScript( {
            code: "window.getSelection().toString();"
        }, function(selection) {
            document.write(selection[0])
        });
    }

    render() {
        return (
            <div className="App">
                <Iframe iframe={iframe} />
                {this.get_highlight()}
            </div>
        );
      }
    }

export default App;

It builds somehow successfully and renders iframe well with given size, however, fails to copy the highlighted text.

Which modification could solve the problem in most compact way?