await context.sync not functioning properly for word JS API

Question

I am using the following code-
await Word.run(async (context) => {

const selectedRange = context.document.getSelection();

selectedRange.load();

await context.sync();

// Insert Content Control

const cc = selectedRange.insertContentControl();

cc.insertOoxml(Value, "Start");

await context.sync(); // Ensure OOXML is inserted before proceeding

// Load content control after insertion

cc.load("paragraphs");

await context.sync();

// Get paragraphs inside the content control

const paras = cc.paragraphs;

paras.load("items");

await context.sync();

// Remove empty paragraphs

paras.items.forEach((para) => {

    if (para.text.trim() === "") {

        para.delete();

    }

});

// Sync changes after deleting paragraphs

await context.sync();

// 🔹 Reload the content control after modifications

cc.load();

await context.sync();

// Set Content Control Properties

cc.appearance = "BoundingBox";

cc.tag = Name;

cc.title = "Title";

cc.cannotEdit = true;

cc.cannotDelete = true;

// Ensure properties are applied correctly

await context.sync();

// Get and log OOXML

const ooxml = cc.getOoxml();

await context.sync();

console.log("OOXML", ooxml.value);
```});

  
  
it works up till para deletion but then stops, so when i check the content control no properties are set. Can someone help me understand what the issue is?  
I want to create the content control, insert the OOXML, delete the empty paragraphs and then set the Content Control properties to cannot edit and delete.