Codemirror widetType being immediately destroyed after creating

I am currently trying to customize a text suggestion feature where text collected from a server is injected into the editor. I am using the widgetTypes to do this (declaring a div in toDOM()), similar to the checkbox example under decorations.

I am encountering a strange issue when trying to await / .then a promise from the server when doing this.

const inlineSuggestionKeymap = Prec.highest(
        key: 'F6',
        run: (view) => {
          const doc = view.viewState.state.doc;
          const result = generateSuggestion()
          res.then((val) => {
            sugText.current = val
              effects: InlineSuggestionEffect.of({ suggestion: val, doc: doc }),
          .catch((err) => console.log(err))
          return true

class InlineSuggestionWidget extends WidgetType {
  constructor(suggestion) {
    this.suggestion = suggestion;
  toDOM() {
    const div = document.createElement('span'); = '0.4';
    div.className = 'cm-inline-suggestion';
    div.textContent = this.suggestion;
    console.log('creating widget', div)
    return div;
  destroy(element) {
    console.log('destroying widget', element)
    return true

If I set the variable result to a string, everything works as I want it to. The string value is placed in the span, which is then seen in the editor.
However, when I use a promise to retrieve the suggested text, the behaviour changes. The span is still created with the resultant text, but it is immediately destroyed in the destroy call, and the suggested text will kind of flicker on the screen.
I have not been able to figure out why / what is causing this, and wondering if there is any advice on how to solve this.

So far I have ensured that the FieldState is not being changed at any point, so I do not think the issue could be that the value could be in the issue being lost and thus the element being destroyed.

The code for the plugin is as follows:

const renderInlineSuggestionPlugin = ViewPlugin.fromClass(
    class Plugin {
      constructor() {
        // Empty decorations
        this.decorations = Decoration.none;
      update(update) {
        const suggestionText = update.state.field(InlineSuggestionState)?.suggestion;
        if (!suggestionText) {
          console.log('not suggestionText', suggestionText)
          this.decorations = Decoration.none;
        let text = suggestionText

        this.decorations = inlineSuggestionDecoration(update.view, text );
      decorations: (v) => v.decorations

function inlineSuggestionDecoration(view, prefix) {
  const pos = view.state.selection.main.head;
  const widgets = [];
  const w = Decoration.widget({
    widget: new InlineSuggestionWidget(prefix),
    side: 1,
  return Decoration.set(widgets);


This isn’t working or full code, so it doesn’t help me reproduce the issue. If you could set up a demo of the problem at (keeping it as small as possible), I can take a look.