What's wrong with copying an array like this? does arr want to copy an array?

const copyArr = function (arr) {
  const res = [];
  for (let i = 0; i < arr.length; iPP) {
    if (arr[i].children) {
      res[i] = { name: arr[i].name };
      for (let j = 0; j < arr[i].children.length; jPP) {
        res[i].children[j] = [{
          name: arr[i].children[j].name,
        }];
      }
      copyArr(arr[i].children);
    } else {
      res[i] = { name: arr[i].name };
    }
  }
  return res;
};

: Cannot set property"0" of undefined
the array structure is as follows:
op: [

    {
      name: "",
    },
    {
      name: "",
    },
    {
      name: "",

    },
    {
      name: "",
    },
    {
      name: "",
    },
    {
      name: "",
      children: [{
        name: "",
        // label: {
        //   backgroundColor: "rgb(38,253,203)",
        //   borderColor: "rgb(97,161,138)",
        //   padding: [8, 2, 8, 2],
        //   borderRadius: 14,
        // },
        children: [
          { name: "T1", value: 2105 },
          { name: "N1", value: 1316 },
          { name: "MO", value: 3151 },
        ],
      }],

    },
    {
      name: "",
    },
    {
      name: "",
    },
    {
      name: "",
    },
    {
      name: "",
      children: [{
        name: "",
        // label: {
        //   backgroundColor: "rgb(38,253,203)",
        //   borderColor: "rgb(97,161,138)",
        //   padding: [8, 2, 8, 2],
        //   borderRadius: 14,
        // },
        children: [{
          name: "",
          children: [{
            name: "",
            children: [
              { name: "1-5" },
            ],
          }, {
            name: "",
            children: [
              { name: "1-5" },
            ],
          }, {
            name: "",
            children: [
              {
                name: "",
                // label: {
                //   backgroundColor: "rgb(29,204,34)",
                // },
              },
            ],
          }, {
            name: "",
            children: [
              {
                name: "",
                // label: {
                //   backgroundColor: "rgb(29,204,34)",
                // },
              },
            ],
          },
          ],
        }],
      }],

    },
    {
      name: "",
      children: [{
        name: "",
        // label: {
        //   backgroundColor: "rgb(38,253,203)",
        //   borderColor: "rgb(97,161,138)",
        //   padding: [8, 2, 8, 2],
        //   borderRadius: 14,
        // },
        children: [{
          name: "",
          children: [{
            name: "",
            // label: {
            //   backgroundColor: "rgb(38,253,203)",
            //   borderColor: "rgb(97,161,138)",
            //   padding: [8, 2, 8, 2],
            //   borderRadius: 14,
            // },
            children: [
              { name: "" },
              { name: "" },
            ],
          }],
        }, {
          name: "",
          children: [{
            name: "",
            // label: {
            //   backgroundColor: "rgb(38,253,203)",
            //   borderColor: "rgb(97,161,138)",
            //   padding: [8, 2, 8, 2],
            //   borderRadius: 14,
            // },
            children: [
              { name: "" },
              { name: "" },
            ],
          }],
        },
        ],
      }, {
        name: "",
        // label: {
        //   backgroundColor: "rgb(38,253,203)",
        //   borderColor: "rgb(97,161,138)",
        //   padding: [8, 2, 8, 2],
        //   borderRadius: 14,
        // },
        children: [{
          name: "",
          children: [{
            name: "",
            // label: {
            //   backgroundColor: "rgb(38,253,203)",
            //   borderColor: "rgb(97,161,138)",
            //   padding: [8, 2, 8, 2],
            //   borderRadius: 14,
            // },
            children: [
              { name: "" },
              { name: "" },
            ],
          }],
        }, {
          name: "",
          children: [
            { name: "" },
          ],
        },
        ],
      }, {
        name: "",
        // label: {
        //   backgroundColor: "rgb(38,253,203)",
        //   borderColor: "rgb(97,161,138)",
        //   padding: [8, 2, 8, 2],
        //   borderRadius: 14,
        // },
        children: [
          { name: "" },
          { name: "" },
        ],
      },
      ],
    },
  ],

copyArr = function (arr) { let res = []; for (let i = 0; i < arr.length; iPP) { if (arr[i].children) { res[i] = { name: arr[i].name ,children:copyArr(arr[i].children)}; //children } else { res[i] = { name: arr[i].name }; } } return res; };