React App calling JavaScript function from embedded webpage

I am working on a React App based on this example: https://github.com/facebook/create-react-app#creating-an-app

I embedded an HTML viewer on the bases of webkit, as far as I understand the code. This is something I inherited, and trying to expand on. The viewer displays a HTML5 page that embeds some JavaScript functions. Now I am trying to call one of the JavaScript function when clicking on a button defined in TypeScript.

Function declaration in HTML page:

function sendMessage(str)
 {
     theRenderArea.sendMessage(str);
 }

Here, "theRenderArea" is defined in a javascript, and this HTML function is just sending the message on to the javascript. Thinking about it, I just need to access teh HTML sendMessage from my React UI. 

Function definition in JavaScript embedded in the HTML page

this.sendMessage = function(b) {
   if (this.isConnected()) {
      b = {
            type: "command",
            message: b.toString()
      };
      var a = new h;
      this.websocket.send(a.encode(b))
   }
};

TypeScript viewer object opening HTML page:

function Viewer() {
    return (
        <>
            <div id="loaderGroup" style={{"display": "none"}}><div id="loader"></div><div id="loaderText">Network calibration</div></div>
            <div id="TheDiv"></div>
        </>
    )
}

export default Viewer

Button definition in React app:

<Button 
    style={{color: selected ? "#6A89FF": "#5B5C5D"}}
    onClick={sendMessage("some string")}>
    Interact
  </Button>

I tried this suggestion: Call external Javascript function from react typescript components

But couldn't get it to work.