How to use the @babylonjs/gui.StackPanel function in @babylonjs/gui

var pipeline = new DefaultRenderingPipeline('default', true, scene, [scene.activeCamera])
  pipeline.depthOfFieldBlurLevel = DepthOfFieldEffectBlurLevel.Medium
  pipeline.depthOfFieldEnabled = true
  pipeline.depthOfField.focalLength = 180
  pipeline.depthOfField.fStop = 3
  pipeline.depthOfField.focusDistance = 2250
  var moveFocusDistance = true

  // add UI to adjust pipeline.depthOfField.fStop, kernelSize, focusDistance, focalLength
  var bgCamera = new ArcRotateCamera('BGCamera', Math.PI / 2 + Math.PI / 7, Math.PI / 2, 100,
    new Vector3(0, 20, 0),
    scene)
  bgCamera.layerMask = 0x10000000
  var advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI('UI')
  advancedTexture.layer.layerMask = 0x10000000
  var UiPanel = new StackPanel()
  UiPanel.width = '220px'
  UiPanel.fontSize = '14px'
  UiPanel.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_RIGHT
  UiPanel.verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER
  advancedTexture.addControl(UiPanel)
  var params = [
    { name: 'fStop', min: 1.4, max: 32 },
    { name: 'focusDistance', min: 0, max: 5000 },
    { name: 'focalLength', min: 0, max: 500 }
  ]
  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