I have created a ReactJS application for Microsoft Word Plugin and I’m using Office.js for interacting with the Word content. I’m trying to generate lists and sublists from the clauses JSON. But, I’m getting the following error. I have added the ReactJS component which tries to add lists to the Document body.

/* eslint-disable no-undef */
import React, { useEffect } from "react";
import { PrimaryButton } from "@fluentui/react/lib/Button";

const clauses = [
  {
    clause_code: "GOV_LAW_1.0",
    title: "Governing Law",
    content: "Clause Code: GOV_LAW_1.0nTitle: Govering LawnThis is the content for GOV_LAW_1.0 - Govering Law.",
    child_clauses: [],
  },
  {
    clause_code: "AFFILIATE_1.0",
    title: "Affiliates",
    content: "Clause Code: AFFILIATE_1.0nTitle: AffiliatesnThis is the content for AFFILIATE_1.0 - Affiliates.",
    child_clauses: [],
  },
  {
    clause_code: "PSLT_1.0",
    title: "PSLT",
    content: "Clause Code: PSLT_1.0nTitle: PSLT is the content for PSLT_1.0 - PSLT.",
    child_clauses: [],
  },
  {
    clause_code: "GENERAL_TERMS_1.0",
    title: "General Terms",
    content:
      "Clause Code: GENERAL_TERMS_1.0nTitle: General TermsnThis is the content for GENERAL_TERMS_1.0 - General Terms.",
    child_clauses: [
      {
        clause_code: "GEN_TERMS_1.1",
        title: "General Terms",
        content:
          "Clause Code: GEN_TERMS_1.1nTitle: General TermsnThis is the content for GEN_TERMS_1.1 - General Terms.",
        child_clauses: [
          {
            clause_code: "GEN_TERMS_1.1_DEFINITIONS",
            title: "General Terms Definitions",
            content:
              "Clause Code: GEN_TERMS_1.1_DEFINITIONSnTitle: General Terms DefinitionsnThis is the content for GEN_TERMS_1.1_DEFINITIONS - General Terms Definitions.",
            child_clauses: [],
          },
        ],
      },
    ],
  },
];

const LoadDocumentContent = () => {
  useEffect(() => {
    Office.onReady((info) => {
      if (info.host === Office.HostType.Word) {
        console.log("Office is ready......");
      }
    });
  }, []);

  const generateOoxml = (clauses, level = 0) => {
    let ooxml = '';
    clauses.forEach(clause => {
      ooxml += `<w:p xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main">
                  <w:pPr>
                    <w:numPr>
                      <w:ilvl w:val="${level}"/>
                      <w:numId w:val="1"/>
                    </w:numPr>
                  </w:pPr>
                  <w:r>
                    <w:t>${clause.content}</w:t>
                  </w:r>
                </w:p>`;
      if (clause.child_clauses.length > 0) {
        ooxml += generateOoxml(clause.child_clauses, level + 1);
      }
    });
    return ooxml;
  };

  const insertClauses = async () => {
    await Word.run(async (context) => {
      const body = context.document.body;

      // Define the numbering format for the document
      const numberingXml = `
        <w:numbering xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main">
          <w:abstractNum w:abstractNumId="0">
            <w:lvl w:ilvl="0">
              <w:start w:val="1"/>
              <w:numFmt w:val="decimal"/>
              <w:lvlText w:val="%1."/>
              <w:lvlJc w:val="left"/>
              <w:pPr>
                <w:ind w:left="720" w:hanging="360"/>
              </w:pPr>
            </w:lvl>
            <w:lvl w:ilvl="1">
              <w:start w:val="1"/>
              <w:numFmt w:val="decimal"/>
              <w:lvlText w:val="%2."/>
              <w:lvlJc w:val="left"/>
              <w:pPr>
                <w:ind w:left="1440" w:hanging="360"/>
              </w:pPr>
            </w:lvl>
          </w:abstractNum>
          <w:num w:numId="1">
            <w:abstractNumId w:val="0"/>
          </w:num>
        </w:numbering>`;

      // Insert numbering definition into the document
      body.insertOoxml(numberingXml, Word.InsertLocation.start);

      // Generate the OOXML for the clauses and insert it into the document
      const clausesOoxml = generateOoxml(clauses);
      const fullOoxml = `<w:document xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main">${clausesOoxml}</w:document>`;
      body.insertOoxml(fullOoxml, Word.InsertLocation.end);

      await context.sync();
    });
  };

  return (
    <div style={{ display: "flex", justifyContent: "center", marginTop: "50px" }}>
      <PrimaryButton text="Refresh Content" onClick={insertClauses} />
    </div>
  );
};

export default LoadDocumentContent;