ngRx | modify state of nested object-array

action.js

on(setMenuChildrenOpen, (state, { parentId, childrenId }) => {
    const result = state.map(parent => {
      if (parent.subAppId === parentId) {
        if (parent.children && parent.children?.length) {
          const chilResult = parent.children.map(child => {
            if (child.subAppId === childrenId) {
              return {
                ...child,
                isAlreadyOpen: true
              }
            } else {
              return parent;
            }
          });
          return {
            ...parent,
            children: chilResult
          }
        } else {
          return parent;
        }
      } else {
        return parent;
      }
    });
    return result;
  })

use the following example

myData = [
    {
        appTitle: 'Batch Transactions',
        isAlreadyOpen: false,
        isAlreadySplitted: false,
        groupName: 'D.G.O. - Tracking and research tool',
        children: [
            {
                appTitle: 'Accounting Transactions',
                url: '/WebResources/minsait_dgo_online_transactions.html',
                isAlreadyOpen: false,
                isAlreadySplitted: false,
                groupName: 'D.G.O. - Tracking and research tool',
                subAppId: 2001,
            },
        ],
        orderId: 1601,
        subAppId: 333
    },
    {
        appTitle: 'Online Transactions',
        isAlreadyOpen: false,
        isAlreadySplitted: false,
        groupName: 'D.G.O. - Tracking and research tool',
        children: [
            {
                appTitle: 'Non-Accounting Transactions',
                url: '/WebResources/minsait_dgo_batch_transactions.html',
                isAlreadyOpen: false,
                isAlreadySplitted: false,
                groupName: 'D.G.O. - Tracking and research tool',
                subAppId: 2003
            },
        ],
        orderId: 1602,
        subAppId: 999
    },
]

function findAndStartChildren(parentId, childrenId){
    const result = myData.map(parent => {
        if (parent.subAppId === parentId){
            if(parent.children && parent.children?.length){
                // has childrens
                console.log('has childrens')
                const chilResult = parent.children.map(child => {
                    if (child.subAppId === childrenId){
                        console.log('child found')
                        return {
                            ...child,
                            isAlreadyOpen: true
                        }
                    }
                });
                return {
                    ...parent,
                    children: chilResult
                }
            }else{
                return parent;
            }
            // console.log(parent);
        }else{
            return parent;
        }
    });

   return result;
}