Why is my React State element being overwritten instead of replaced?

Ok I’m trying out something unique. I have a component where the state of the component is an element itself (not a simple variable or array). And this state element is directly being returned.

I realize this is not in line with the general principles of React but there is a reason why I’ve made it this way.

My component is a network of different SVG paths. Each path has a ‘d’ attribute which is undergoing changes. The state of the compoenent is an element which looks something like this:

<g className='PathNetwork'>
  <g>
    <Path d="pathCoordinates">
    <Path d="pathCoordinates">
    <Path d="pathCoordinates">
  </g>

  <g>
    <Path d="pathCoordinates">
    <Path d="pathCoordinates">
    <Path d="pathCoordinates">
  </g>
</g>

This “Pathnetwork” is the state of the component. And so when I want to update it, I end up creating a new structure similar to the one above with new “pathCoordinates” which will be assigned to the ‘d’ property. And once that new structure is created, I will insert it into the setter of the component’s state.

It seems to be working initially, but I am finding that the path network on my page is being over-drawn….the paths are being drawn, and then drawn on top of that….the paths are literally getting brighter with each second.

I’m wondering if I am updating the state correctly. Here is the relevant code. As you can see, I am procedurally creating new path objects, and inserting them into new elements, and finally when I’m doing I am trying to replace the data in the existing state with that new element. Am I doing it correctly? :

 const [pathNetwork, set_pathNetwork] = useState(createPathNetwork(props.coordinatesArr));

 //PathNetwork updating hook
    useEffect(()=>{
        if ( props.coordinatesArr.length >=1){
            updateDPropOfPaths( props.coordinatesArr) );
        }
    }, [ props.coordinatesArr]);


return(
        <g>
           {
           arrOfRayPaths != null ?
            arrOfRayPaths

            :null
           }          
         </g>
        )

function updateDPropOfPaths(freshCoordsArr){
   let compositePathsArr = pathNetwork.props.children;
   let finalStruct = React.createElement('g', {}, []);

   for (let x = 0; x < compositePathsArr .length; x++){
      let currCompRay = compositePathsArr[x];

       for(let i=0; i<freshCoordsArr.length; i++){ 
          let currTierStruct = React.createElement('g', {}, []);
          let originalIndividualPathsArr = currCompRay.props.children; 
           
           for(let c=0; c<3; c++ ){
              let currPath = originalIndividualPathsArr[c];
              let freshPath = createFreshPath(currPath, freshCoordsArr[i]);
              currTierStruct.props.children.push(freshPath);
           }
       finalStruct.props.children.push(currTierStruct);
        }
    }

      //Replacing the existing state structure with the newly created <g> element
      set_pathNetwork(null);
      set_pathNetwork(finalStruct);
 
}