Как динамически изменить понятное имя в веб-чате Twilio Flex

Итак, я следую руководству здесь о том, как настроить Twilio Flex WebChat. Хотя это определенно работает, мне нужно будет изменить понятное имя позже.

Как работает мое приложение, оно показывает веб-чат до подписания пользователями, поскольку скрипты находятся в файле index.html приложения реакции.

Мне нужно изменить его так, чтобы после входа в систему обновлялось имя, отображаемое в чате.

Это то, что у меня есть до сих пор, но это определенно не работает. Предположим, я могу получить имена из локального хранилища, и вход в систему работает.

componentDidMount() {
 //other stuff
this.initializeTwilio();
}

initializeTwilio() {
  const name = localStorage.getItem("firstName") +' '+ localStorage.getItem("lastName");
  const appConfig = {
    accountSid :"hidden",
    flexFlowSid: "hidden",
    context: {
      friendlyName: name
    }
  };
  Twilio.FlexWebChat.renderWebChat(appConfig);
}

Я тоже пробовал это делать:

  let test = Twilio.FlexWebChat.Manager.create(appConfig);
  Twilio.FlexWebChat.ContextProvider.Manager = test;
  Twilio.FlexWebChat.renderWebChat(appConfig);

Я также пробовал редактировать MessagingCanvas следующим образом:

 initializeTwilio =() => {
    const first = localStorage.getItem("firstName");
    let name ="";
    if(first){
      const last = localStorage.getItem("lastName");
      name = first +' '+ last;
    }
    else { 
      name = "Anonymous";
    }
    Twilio.FlexWebChat.MessagingCanvas.defaultProps.memberDisplayOptions = {
      yourDefaultName: name,
      yourFriendlyNameOverride: true
    }
    console.log(Twilio.FlexWebChat.MessagingCanvas.defaultProps);
}

Это изменит значение в консоли, но не имя, отображаемое в окне чата.

Я думаю, мне нужно обновить appconfig и повторно отобразить окно чата, но я не знаю, как это сделать, и может быть другой способ решения проблемы. Я открыт для просветления по этому поводу.