title: Update the value of nested object in the array based on the key
body: <p>i have two array of objects like below, am trying to compare two arrays and looking to update the object total value of arr1 if the id matches with arr2.</p>
  <pre><code>const arr1 = [
  {
    id: 1,
    value: { total: 0 },
  },
  {
    id: 2,
    value: { total: 0 },
  },
  {
    id: 3,
    value: { total: 0 },
  },
   id: 4,
    value: { total: 0 },
  },
  ];
  
  const arr2 = [
      {
        id: 2,
        value: 3 ,
      },
      {
        id: 3,
        value: 5,
      },
  
    ];
  </code></pre>
  <p>I am trying to compare two arrays and looking to update the object total value of arr1 if the id matches with arr2</p>
  <p>expected result is</p>
  <pre><code>const arr1 = [
   {
    id: 1,
   value: { total: 0 },
   },
  {
  id: 2,
  value: { total: 3 },
  },
  {
   id: 3,
   value: { total: 5 },
   },
   {
    id: 4,
    value: { total: 0 },
   },
   ];
  </code></pre>
  <p>I have tried the below code,</p>
  <pre><code>arr1.map((item) =&gt; {
  arr2.find((element) =&gt; {
    if (element.id === item.id ) {
      item = {
        ...item,
        value: {
          ...item.value,
          total: item.value.total + element.value,
        },
      };
      console.log(item);
    }
  });
  return item;
  });
  </code></pre>