Trouble while injecting generated text in the input field of Twitter using a browser extension

I'm currently developing a Twitter browser extension, and I've encountered an issue with injecting AI-generated text, obtained from an API, into Twitter's tweet input field. Although the injection process seems successful, the text doesn't persist properly on Twitter's servers. Additionally, even after removing or editing the injected text from the input field, it remains visible and superimposed on the interface. On removing all the injected text from the input field, the "Post" buttom dims out and it looks like that:

Here's the code I used:

function setTwitterInputText(aiGeneratedText: string) {
  const inputField = document.querySelector(
    '[class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"]'
  );

  if (inputField) {
    const dataOffsetKey = inputField.getAttribute('data-offset-key');
    
    const span = `<span data-offset-key=${dataOffsetKey}>
                     <span data-text="true">
                        ${aiGeneratedText}
                     </span>
                  </span>`;
    inputField.innerHTML = span;
    (inputField as HTMLInputElement | HTMLTextAreaElement).click();
    inputField.dispatchEvent(
      new Event('input', { bubbles: true, cancelable: true })
    );
  }
}

I'm seeking guidance on how to ensure that the injected text properly persists on Twitter's servers.