Office.js: ContentControl in table broken after inserting row

I'm using Microsoft® Word for Microsoft 365 MSO (Version 2307 Build 16.0.16626.20170) 64-bit. Running add-inn sample "Office Add-in Task Pane project" with JavaScript from Microsoft Tutorial: "Create a Word task pane add-in" - page.

Here is my "RUN" button on-click handler:

export async function run() {
  return Word.run(async (context) => {
    /**
     * Create Table
     */
    const data = [
      ["Tokyo", "Beijing", "Seattle"],
      ["Apple", "Orange", "Pineapple"]
    ];
    const table = context.document.body.insertTable(2, 3, "Start", data);
    table.styleBuiltIn = Word.BuiltInStyleName.gridTable5Dark_Accent2;
    table.styleFirstColumn = false;

    /**
     * Selecting first row and inserting ContentControl
     */
    table.rows.getFirst().select("Select");
    let range = context.document.getSelection();
    range.insertContentControl();
    /**
     * At this point ContentControl covers only first row
     */

    /**
     * Inserting new row to the end
     */
    const firstTable = context.document.body.tables.getFirst();
    firstTable.addRows("End", 1, [["New", "Row", "Here"]]);

    /**
     * At this point ContentControl spread for all rows :(    
    */

   await context.sync();
});

In the code above only the first row is inside content control. But after adding a new row firstTable.addRows("End", 1, [["New", "Row", "Here"]]) all rows become inside content control. How to fix it?

from Office.js: ContentControl in table broken after inserting row