i would like to replace some text with component in array that contains strings and react components. In the code snipet below, i see that the nodes were modified, but after foreach loop no changes are detected in array. Why? What goes wrong?

import parser from 'react-html-parser';

const text = 'i am a string (item) with <ul><li>first item</li><li>second item</li></ul> and some text';

// create array of strings and react components 
const arrNodes = parser(text);

// loop and replace
arrNodes.forEach(function iter(node){
 if(typeof node === 'string') {
   if(node.indexOf('item') > -1) {
     const newNode = node.split('item'); 
     newNode.splice(1,0, 'Component'); // later should be react component
     node = newNode;
   }
  }
 if(node.props && node.props.children && Array.isArray(node.props.children)) {
    node.props.children.forEach(iter);
 }
})
console.log(arrNodes)