Autodesk forge viewer loading customized properties

I am loading the model in the viewer, adding a custom button, getting all elements and their properties. i want to be able to change some of these properties and then view the change on the model. even if it wont update the translated file (just in the viewer)

This is how i am loading the model

function DisplayViewer() {
const options = {
  env: 'AutodeskProduction',
  api: 'derivativeV2',
  accessToken: accessToken
}

const documentId = 'urn:' + urn
let viewerApp: any
window.Autodesk.Viewing.Initializer(options, onInitialized)
function onInitialized() {
  const htmlDiv = document.getElementById('forgeViewer')
  viewerApp = new window.Autodesk.Viewing.GuiViewer3D(htmlDiv, {
    extensions: ['MyAwesomeExtension', 'CustomPropertyPanelExtension']
  })
  const startedCode = viewerApp.start()
}
window.Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess)

function onDocumentLoadSuccess(viewerDocument: any) {
  const viewerapp = viewerDocument.getRoot()
  const md_ViewerDocument = viewerDocument // Hold the viewerDocument in a global variable so that we can access it within SelectViewable()
  const md_viewables = viewerapp.search({ type: 'geometry' })
  const sel = document.getElementById('viewables')
  for (let i = 0; i < md_viewables.length; i++) {
    const opt = document.createElement('option')
    opt.innerHTML = md_viewables[i].data.name
    opt.value = md_viewables[i].data.name
    sel && sel.appendChild(opt)
  }
  viewerApp.loadDocumentNode(viewerDocument, md_viewables[0])
  if (md_viewables.length > 1) {
    const viewablesDIV = document.getElementById('viewables_dropdown')
  }
}
}

This is how i am adding the button

class MyAwesomeExtension extends window.Autodesk.Viewing.Extension {
    constructor(viewer: any, options: any) {
      super(viewer, options)
      this._group = null
      this._button = null
    }

    load() {
      return true
    }

    unload() {
      // Clean our UI elements if we added any
      if (this._group) {
        this._group.removeControl(this._button)
        if (this._group.getNumberOfControls() === 0) {
          this.viewer.toolbar.removeControl(this._group)
        }
      }
      return true
    }

    onToolbarCreated() {
      // Create a new toolbar group if it doesn't exist
      this._group = this.viewer.toolbar.getControl('allMyAwesomeExtensionsToolbar')
      if (!this._group) {
        this._group = new window.Autodesk.Viewing.UI.ControlGroup('allMyAwesomeExtensionsToolbar')
        this.viewer.toolbar.addControl(this._group)
      }

      // Add a new button to the toolbar group
      this._button = new window.Autodesk.Viewing.UI.Button('myAwesomeExtensionButton')
      this._button.onClick = (ev: any) => {
        const instanceTree = this.viewer.model.getData().instanceTree
        const allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex)
        const test = allDbIdsStr.map(function (id) {
          return parseInt(id)
        })
        this.viewer.model.getBulkProperties(test, null, function (elements: any) {
          addData(elements)
        })
        setaValidate(!validate)
      }
      this._button.setToolTip('Validate')
      this._group.addControl(this._button)
    }
  }
  window.Autodesk.Viewing.theExtensionManager.registerExtension('MyAwesomeExtension', MyAwesomeExtension)
}
}, [deskLoaded, accessToken, extension, urn])

The addData function gets all the elements and properties. I want to be able to push the updated db