title: Adding new property recursively to an object fails
body: <p>Following <a href="https://stackoverflow.com/questions/57728903/unexpected-outcome-when-modifying-an-object-in-a-function">Unexpected outcome when modifying an object in a function</a><br>
  I learned that i have to clone the <code>item passed to the function</code> before changing it and returning it, and it worked for the said example, but when i tried it in my code which was a recursive code, it didn't work, here is an example showing this:  </p>
  
  <p>As you can see i intend to update the property <code>B</code> if it exists and if it doesn't i want to create a property B and then give it last value, but for some reason this fails !, of course if i create the property B before hand (before calling it recursively), i can give the value to it, but i don't know why this is needed or why my current code doesn't work!  </p>
  
  <pre><code>function addB(item) {
    let newItem = { ...item };
  
    if (newItem.B) {
      newItem.B.value = "I am B";
    } else {
      newItem.B = {
        value: "I am B"
      };
    }
  
    if (newItem.children) {
      newItem.children.forEach(child =&gt; {
        //if you uncomment the code below, the code works!
        //child.B = {};
        child = addB(child);
      });
    }
  
    return newItem;
  }
  
  function App() {
    let parent = {
      id: 0,
      children: [
        {
          id: 1,
          children: [
            {
              id: 3
            },
            {
              id: 4
            }
          ]
        },
        {
          id: 2
        }
      ]
    };
  
    parent = addB(parent);
  
    console.log(parent);
  }  
  </code></pre>
  
  <p><strong>Current output:</strong><br>
  <a href="https://i.stack.imgur.com/Z6Lzk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Z6Lzk.png" alt="Current output"></a>  </p>
  
  <p><strong>Expected output:</strong><br>
  <a href="https://i.stack.imgur.com/uxqEQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uxqEQ.png" alt="Expected output"></a></p>
  
  <p><strong><a href="https://codesandbox.io/s/purple-glitter-4788v?fontsize=14" rel="nofollow noreferrer">You can see this example and its result in this CodeSandBox</a></strong> </p>