How to update froala editor toolbar drop down options dynamically

Question

In the below code, I am trying to create a dropdown for showing some options to be selected by the user in @froala-editor. Here the problem is am fetching this drop-down data from the backend and am unable to update the option.

const addIcon = () => {
    const option = {}
    templateData?.forEach((table) => {
      option[table.name] = table.name
    })
    if(Object.keys(option)?.length){
      Froala.DefineIcon('h', { NAME: t('import_template'), template: 'text' })
      Froala.RegisterCommand('insertTemplate', {
        title: t('predefined_disclosure_template_table'),
        icon: 'h',
        type: 'dropdown',
        options: { ...option },
        callback: function (cmd, val, params) {
          const tableHtml = templateData.find((table) => table.name === val)
          this.html.insert(tableHtml.data.outerHTML)
        },
        refreshAfterCallback: true,
      })
    }
    
    setTimeout(() => {
      applyStyleToButton()
    }, 10)
  }

Here I tried reinitializing the @froala-editor on drop-down data update by destroy and init function and that works of the local machine while failing in dev and prod env.

I tried to render the @froala-editor only when we fetched the data but still facing the issue

I am expecting a solution that will help me dynamically update the options without doing such things with the help of Froala editor API.