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 in this app which calls 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);
 }

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={changeColor}>
    Interact
  </Button>

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

But couldn’t get it to work.