How to use the babylonjs-gui.TextBlock function in babylonjs-gui

create(scene: Scene): BabylonButton3D {
    this.button3D = new BabylonButton3D(this.props.name)

    // console.log("created button", this.props.name)

    let text: TextBlock | undefined = undefined
    let image: BabylonImage | undefined = undefined

    if (this.props.imageUrl) {
      image = new BabylonImage(`${this.props.name}-image`, this.props.imageUrl)
    }

    if (this.props.text) {
      text = new TextBlock()

      text.text = this.props.text
      if (this.props.fontColor) {
        text.color = this.props.fontColor.toHexString()
      } else {
        text.color = "white" // default in BabylonJS
      }

      if (this.props.fontSize) {
        text.fontSize = this.props.fontSize
      } else {
        text.fontSize = 24 // default in BabylonJS
      }
    }

    if (text && image) {

create(scene: Scene): TextBlock {
    // allow newline char, but should force users to use text={'line1.\nline2.'} to override.
    let text = this.props.text.replace(/(\\n)+/g, "\n")
    this.textBlock = new TextBlock(this.props.name, text)

    // this belongs in control props handler
    if (this.props.color) {
      this.textBlock.color = this.props.color
    }

    // TODO: move all of these to props handler
    if (this.props.fontSize) {
      this.textBlock.fontSize = this.props.fontSize
    }

    if (this.props.fontStyle) {
      this.textBlock.fontStyle = this.props.fontStyle
    }

    if (this.props.fontFamily) {

// PBR GUI
        const label = new Rectangle(str);
        label.background = 'black'
        label.height = height;
        label.alpha = 0.5;
        label.width = width;
        label.cornerRadius = 20;
        label.thickness = 1;
        label.linkOffsetY = 30;
        label.top = '0%';
        label.zIndex = 5;
        label.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
        label.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_RIGHT;
        gui.addControl(label);

        const text = new TextBlock();
        text.text = str;
        text.color = 'white';
        label.addControl(text);
    
        if (!lines) {
            label.linkWithMesh(mesh);
            return label;
        }

        var line = new Line();
        line.alpha = 0.5;
        line.lineWidth = 5;
        line.dash = [5, 10];
        gui.addControl(line);
        line.linkWithMesh(mesh);
        line.connectedControl = label;

React.useEffect(() => {
    textBlock = new GUI.TextBlock('lines_text', props.stdoutLines.join('\n'));
    textBlock.textWrapping = true;
    textBlock.textHorizontalAlignment = GUI.Control.HORIZONTAL_ALIGNMENT_LEFT
    textBlock.textVerticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_TOP
    textBlock.fontFamily = "Consolas"
    textBlock.color = "#00FF00"
    textBlock.fontSize = 100

    const padding = 15
    textBlock.paddingTop = padding
    textBlock.paddingRight = padding
    textBlock.paddingBottom = padding
    textBlock.paddingLeft = padding

    return stopCursorInterval
  }, [])

var startGameButton = function (panel) {
    var button = new GUI.Button3D();
    panel.addControl(button);
    button.onPointerUpObservable.add(function () {
        //reset score
        updateScore(0);
        addSpheres(scene);
        button.isVisible = false;
    });
    var text1 = new GUI.TextBlock();
    text1.text = "Start Game";
    text1.color = "white";
    text1.fontSize = 24;
    button.content = text1;
}
var scene: Scene = createScene();

txtX.left = 20;
        txtX.top = 60;

        let txtY = new GUI.TextBlock();
        txtY.height = "20px";
        txtY.width = "500px";
        txtY.fontSize = 20;
        txtY.text = "Y: ";
        txtY.textHorizontalAlignment = GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
        txtY.textVerticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_TOP;
        txtY.horizontalAlignment = GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
        txtY.verticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_TOP;
        txtY.left = 20;
        txtY.top = 90;
        
        let txtZ = new GUI.TextBlock();
        txtZ.height = "20px";
        txtZ.width = "500px";
        txtZ.fontSize = 20;
        txtZ.text = "Z: ";
        txtZ.textHorizontalAlignment = GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
        txtZ.textVerticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_TOP;
        txtZ.horizontalAlignment = GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
        txtZ.verticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_TOP;
        txtZ.left = 20;
        txtZ.top = 120;
        
        guiTexture.addControl(txtX);
        guiTexture.addControl(txtY);
        guiTexture.addControl(txtZ);

        return {

public static createCoordinatesText(guiTexture: GUI.AdvancedDynamicTexture): { txtX: GUI.TextBlock, txtY: GUI.TextBlock, txtZ: GUI.TextBlock } {
        let txtX = new GUI.TextBlock();
        txtX.height = "20px";
        txtX.width = "500px";
        txtX.fontSize = 20;
        txtX.text = "X: ";
        txtX.textHorizontalAlignment = GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
        txtX.textVerticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_TOP;
        txtX.horizontalAlignment = GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
        txtX.verticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_TOP;
        txtX.left = 20;
        txtX.top = 60;

        let txtY = new GUI.TextBlock();
        txtY.height = "20px";
        txtY.width = "500px";
        txtY.fontSize = 20;
        txtY.text = "Y: ";
        txtY.textHorizontalAlignment = GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
        txtY.textVerticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_TOP;
        txtY.horizontalAlignment = GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
        txtY.verticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_TOP;
        txtY.left = 20;
        txtY.top = 90;
        
        let txtZ = new GUI.TextBlock();
        txtZ.height = "20px";
        txtZ.width = "500px";
        txtZ.fontSize = 20;
        txtZ.text = "Z: ";

public static createCoordinatesText(guiTexture: GUI.AdvancedDynamicTexture): { txtX: GUI.TextBlock, txtY: GUI.TextBlock, txtZ: GUI.TextBlock } {
        let txtX = new GUI.TextBlock();
        txtX.height = "20px";
        txtX.width = "500px";
        txtX.fontSize = 20;
        txtX.text = "X: ";
        txtX.textHorizontalAlignment = GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
        txtX.textVerticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_TOP;
        txtX.horizontalAlignment = GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
        txtX.verticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_TOP;
        txtX.left = 20;
        txtX.top = 60;

        let txtY = new GUI.TextBlock();
        txtY.height = "20px";
        txtY.width = "500px";
        txtY.fontSize = 20;
        txtY.text = "Y: ";

params.forEach(function(param){
      var header = new TextBlock();
      header.text = param.name+":"+pipeline.depthOfField[param.name].toFixed(2);
      header.height = "40px";
      header.color = "black";
      header.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
      header.paddingTop = "10px";
      UiPanel.addControl(header); 
      var slider = new Slider();
      slider.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
      slider.minimum = param.min;
      slider.maximum = param.max;
      slider.color = "#636e72";
      slider.value = pipeline.depthOfField[param.name];
      slider.height = "20px";
      slider.width = "205px";
      UiPanel.addControl(slider); 
      slider.onValueChangedObservable.add(function(v){