unable to create an MxGraph from the XML provided : <p>It's a React project and I am trying to convert XML to MxGraph.</p>

<p>PFB :- the code that I have</p>

<pre><code>import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import {
  mxGraph,
  mxRubberband,
  mxKeyHandler,
  mxClient,
  mxUtils,
  mxEvent
} from 'mxgraph-js'
// import axios from 'axios'
import parser from 'fast-xml-parser'

import '../../common.css'
import '../../mxgraph.css'

class mxGraphGridAreaEditor extends Component {
  constructor (props) {
    super(props)
    this.state = {
      graph: {},
      layout: {},
      json: '',
      dragElt: null,
      createVisile: false,
      currentNode: null,
      currentTask: ''
    }
    this.LoadGraph = this.LoadGraph.bind(this)
  }
  componentDidMount () {
        const xml = `&lt;mxGraphModel dx='2221' dy='774' grid='1' gridSize='10' guides='1' tooltips='1' connect='1' arrows='1' fold='1' page='1' pageScale='1' pageWidth='827' pageHeight='1169' math='0' shadow='0'&gt;
        &lt;root&gt;
          &lt;mxCell id='0'/&gt;
          &lt;mxCell id='1' parent='0'/&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-7' value='&amp;lt;b style=&amp;quot;font-size: 20px;&amp;quot;&amp;gt;Scorecard&amp;lt;/b&amp;gt;' 
        style='rounded=0;whiteSpace=wrap;html=1;fillColor=#E6E6E6;fontSize=20;verticalAlign=top;strokeColor=none;' parent='1' vertex='1'&gt;
            &lt;mxGeometry x='-230' y='10' width='240' height='800' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-1' value='KPA' style='rounded=0;whiteSpace=wrap;html=1;verticalAlign=top;fontStyle=1;strokeColor=none;fontSize=20;fillColor=#CCCCCC;' parent='1' vertex='1'&gt;
            &lt;mxGeometry x='10' y='10' width='240' height='800' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-2' value='&amp;lt;b style=&amp;quot;font-size: 20px;&amp;quot;&amp;gt;Domain&amp;lt;/b&amp;gt;' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#E6E6E6;fontSize=20;verticalAlign=top;strokeColor=none;' parent='1' vertex='1'&gt;
            &lt;mxGeometry x='250' y='10' width='240' height='800' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-3' value='Cluster' style='rounded=0;whiteSpace=wrap;html=1;verticalAlign=top;fontStyle=1;strokeColor=none;fontSize=20;fillColor=#CCCCCC;' parent='1' vertex='1'&gt;
            &lt;mxGeometry x='490' y='10' width='240' height='800' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-4' value='&amp;lt;b style=&amp;quot;font-size: 20px;&amp;quot;&amp;gt;KPI&amp;lt;/b&amp;gt;' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#E6E6E6;fontSize=20;verticalAlign=top;strokeColor=none;' parent='1' vertex='1'&gt;
            &lt;mxGeometry x='730' y='10' width='240' height='800' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-15' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-13' target='y3w0JNk_32n-TRd_Wrkm-5' edge='1'&gt;
            &lt;mxGeometry width='50' height='50' relative='1' as='geometry'&gt;
              &lt;mxPoint x='-160' y='450' as='sourcePoint'/&gt;
              &lt;mxPoint x='-110' y='400' as='targetPoint'/&gt;
            &lt;/mxGeometry&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-19' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-16' target='y3w0JNk_32n-TRd_Wrkm-13' edge='1'&gt;
            &lt;mxGeometry width='50' height='50' relative='1' as='geometry'&gt;
              &lt;mxPoint x='40' y='297.5' as='sourcePoint'/&gt;
              &lt;mxPoint y='297.5' as='targetPoint'/&gt;
            &lt;/mxGeometry&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-26' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-20' target='y3w0JNk_32n-TRd_Wrkm-16' edge='1'&gt;
            &lt;mxGeometry width='50' height='50' relative='1' as='geometry'&gt;
              &lt;mxPoint x='280' y='297.5' as='sourcePoint'/&gt;
              &lt;mxPoint x='240' y='297.5' as='targetPoint'/&gt;
            &lt;/mxGeometry&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-27' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-23' target='y3w0JNk_32n-TRd_Wrkm-16' edge='1'&gt;
            &lt;mxGeometry width='50' height='50' relative='1' as='geometry'&gt;
              &lt;mxPoint x='520' y='189.79310344827593' as='sourcePoint'/&gt;
              &lt;mxPoint x='480' y='297.37931034482756' as='targetPoint'/&gt;
            &lt;/mxGeometry&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-38' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-34' target='y3w0JNk_32n-TRd_Wrkm-20' edge='1'&gt;
            &lt;mxGeometry width='50' height='50' relative='1' as='geometry'&gt;
              &lt;mxPoint x='280' y='297.5' as='sourcePoint'/&gt;
              &lt;mxPoint x='240' y='297.5' as='targetPoint'/&gt;
            &lt;/mxGeometry&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-48' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-40' target='y3w0JNk_32n-TRd_Wrkm-23' edge='1'&gt;
            &lt;mxGeometry width='50' height='50' relative='1' as='geometry'&gt;
              &lt;mxPoint x='520' y='402.2068965517242' as='sourcePoint'/&gt;
              &lt;mxPoint x='480' y='297.37931034482756' as='targetPoint'/&gt;
            &lt;/mxGeometry&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-49' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-43' target='y3w0JNk_32n-TRd_Wrkm-23' edge='1'&gt;
            &lt;mxGeometry width='50' height='50' relative='1' as='geometry'&gt;
              &lt;mxPoint x='530' y='412.2068965517242' as='sourcePoint'/&gt;
              &lt;mxPoint x='490' y='307.37931034482756' as='targetPoint'/&gt;
            &lt;/mxGeometry&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-50' value='' style='group' parent='1' vertex='1' connectable='0'&gt;
            &lt;mxGeometry x='750' y='440' width='200' height='145' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-43' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-50' vertex='1'&gt;
            &lt;mxGeometry width='200' height='145' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-44' value='End To End Fault Handling Effectiveness S2' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-50' vertex='1'&gt;
            &lt;mxGeometry width='200' height='55' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-45' value='&amp;lt;font style=&amp;quot;font-size: 23px&amp;quot;&amp;gt;&amp;lt;span&amp;gt;R 19 762&amp;lt;/span&amp;gt;&amp;lt;br&amp;gt;&amp;lt;font style=&amp;quot;font-size: 15px&amp;quot;&amp;gt;19.8%&amp;lt;/font&amp;gt;&amp;lt;/font&amp;gt;&amp;lt;br&amp;gt;' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-50' vertex='1'&gt;
            &lt;mxGeometry x='10' y='65' width='180' height='70' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-51' value='' style='group' parent='1' vertex='1' connectable='0'&gt;
            &lt;mxGeometry x='750' y='247.5' width='200' height='145' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-40' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-51' vertex='1'&gt;
            &lt;mxGeometry width='200' height='145' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-41' value='End To End Fault Handling Effectiveness S1' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-51' vertex='1'&gt;
            &lt;mxGeometry width='200' height='55' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-42' value='&amp;lt;font style=&amp;quot;font-size: 23px&amp;quot;&amp;gt;&amp;lt;span&amp;gt;R 15 544&amp;lt;/span&amp;gt;&amp;lt;br&amp;gt;&amp;lt;font style=&amp;quot;font-size: 15px&amp;quot;&amp;gt;15.5%&amp;lt;/font&amp;gt;&amp;lt;/font&amp;gt;&amp;lt;br&amp;gt;' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-51' vertex='1'&gt;
            &lt;mxGeometry x='10' y='65.5' width='180' height='70' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-52' value='' style='group' parent='1' vertex='1' connectable='0'&gt;
            &lt;mxGeometry x='510' y='344' width='200' height='145' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-23' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-52' vertex='1'&gt;
            &lt;mxGeometry width='200' height='145' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-24' value='Fault Management' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-52' vertex='1'&gt;
            &lt;mxGeometry width='200' height='55' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-25' value='&amp;lt;font style=&amp;quot;font-size: 23px&amp;quot;&amp;gt;&amp;lt;span&amp;gt;R 35&amp;lt;/span&amp;gt;&amp;lt;span&amp;gt;&amp;amp;nbsp;306&amp;lt;/span&amp;gt;&amp;lt;br&amp;gt;&amp;lt;font style=&amp;quot;font-size: 15px&amp;quot;&amp;gt;35.3%&amp;lt;/font&amp;gt;&amp;lt;/font&amp;gt;&amp;lt;br&amp;gt;' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-52' vertex='1'&gt;
            &lt;mxGeometry x='10' y='65' width='180' height='70' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-53' value='' style='group' parent='1' vertex='1' connectable='0'&gt;
            &lt;mxGeometry x='750' y='58' width='200' height='145' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-34' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-53' vertex='1'&gt;
            &lt;mxGeometry width='200' height='145' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-35' value='Reporting Effectiveness' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-53' vertex='1'&gt;
            &lt;mxGeometry width='200' height='55' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-36' value='&amp;lt;font style=&amp;quot;font-size: 23px&amp;quot;&amp;gt;&amp;lt;span&amp;gt;R 19 500&amp;lt;/span&amp;gt;&amp;lt;br&amp;gt;&amp;lt;font style=&amp;quot;font-size: 15px&amp;quot;&amp;gt;19.5%&amp;lt;/font&amp;gt;&amp;lt;/font&amp;gt;&amp;lt;br&amp;gt;' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-53' vertex='1'&gt;
            &lt;mxGeometry x='10' y='65' width='180' height='70' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-54' value='' style='group' parent='1' vertex='1' connectable='0'&gt;
            &lt;mxGeometry x='510' y='58' width='200' height='145' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-20' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-54' vertex='1'&gt;
            &lt;mxGeometry width='200' height='145' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-21' value='Reporting' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-54' vertex='1'&gt;
            &lt;mxGeometry width='200' height='55' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-22' value='&amp;lt;font style=&amp;quot;font-size: 23px&amp;quot;&amp;gt;&amp;lt;span&amp;gt;R 19 500&amp;lt;/span&amp;gt;&amp;lt;br&amp;gt;&amp;lt;font style=&amp;quot;font-size: 15px&amp;quot;&amp;gt;19.5%&amp;lt;/font&amp;gt;&amp;lt;/font&amp;gt;&amp;lt;br&amp;gt;' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-54' vertex='1'&gt;
            &lt;mxGeometry x='10' y='65' width='180' height='70' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-55' value='' style='group' parent='1' vertex='1' connectable='0'&gt;
            &lt;mxGeometry x='270' y='201' width='200' height='145' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-16' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-55' vertex='1'&gt;
            &lt;mxGeometry width='200' height='145' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-17' value='Common' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-55' vertex='1'&gt;
            &lt;mxGeometry width='200' height='55' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-18' value='&amp;lt;font style=&amp;quot;font-size: 23px&amp;quot;&amp;gt;&amp;lt;span&amp;gt;R&amp;amp;nbsp;&amp;lt;/span&amp;gt;&amp;lt;span&amp;gt;54 806&amp;lt;/span&amp;gt;&amp;lt;br&amp;gt;&amp;lt;font style=&amp;quot;font-size: 15px&amp;quot;&amp;gt;54.8%&amp;lt;/font&amp;gt;&amp;lt;/font&amp;gt;&amp;lt;br&amp;gt;' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-55' vertex='1'&gt;
            &lt;mxGeometry x='10' y='65' width='180' height='70' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-56' value='' style='group' parent='1' vertex='1' connectable='0'&gt;
            &lt;mxGeometry x='30' y='420' width='200' height='145' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-13' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-56' vertex='1'&gt;
            &lt;mxGeometry width='200' height='145' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-14' value='Process' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-56' vertex='1'&gt;
            &lt;mxGeometry width='200' height='55' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-11' value='&amp;lt;font style=&amp;quot;font-size: 23px&amp;quot;&amp;gt;&amp;lt;span&amp;gt;R&amp;amp;nbsp;&amp;lt;/span&amp;gt;&amp;lt;span&amp;gt;54 806&amp;lt;/span&amp;gt;&amp;lt;br&amp;gt;&amp;lt;font style=&amp;quot;font-size: 15px&amp;quot;&amp;gt;54.8%&amp;lt;/font&amp;gt;&amp;lt;/font&amp;gt;&amp;lt;br&amp;gt;' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-56' vertex='1'&gt;
            &lt;mxGeometry x='10' y='65' width='180' height='70' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-57' value='' style='group' parent='1' vertex='1' connectable='0'&gt;
            &lt;mxGeometry x='-210' y='419.99999999999994' width='200' height='145' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-5' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-57' vertex='1'&gt;
            &lt;mxGeometry width='200' height='145' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-6' value='&amp;lt;font style=&amp;quot;font-size: 23px&amp;quot;&amp;gt;&amp;lt;span&amp;gt;R&amp;amp;nbsp;&amp;lt;/span&amp;gt;&amp;lt;span&amp;gt;54 806&amp;lt;/span&amp;gt;&amp;lt;br&amp;gt;&amp;lt;font style=&amp;quot;font-size: 15px&amp;quot;&amp;gt;54.8%&amp;lt;/font&amp;gt;&amp;lt;/font&amp;gt;&amp;lt;br&amp;gt;' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-57' vertex='1'&gt;
            &lt;mxGeometry x='10' y='65' width='180' height='70' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-12' value='Huawei RAN and Transmission O&amp;amp;amp;M' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-57' vertex='1'&gt;
            &lt;mxGeometry width='200' height='55' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-62' value='' style='group' parent='1' vertex='1' connectable='0'&gt;
            &lt;mxGeometry x='750' y='640' width='200' height='145' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-59' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-62' vertex='1'&gt;
            &lt;mxGeometry width='200' height='145' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-60' value='Network Monitoring Effectiveness' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-62' vertex='1'&gt;
            &lt;mxGeometry width='200' height='55' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-61' value='&amp;lt;font style=&amp;quot;font-size: 23px&amp;quot;&amp;gt;&amp;lt;span&amp;gt;R 0&amp;lt;/span&amp;gt;&amp;lt;br&amp;gt;&amp;lt;font style=&amp;quot;font-size: 15px&amp;quot;&amp;gt;0.0%&amp;lt;/font&amp;gt;&amp;lt;/font&amp;gt;&amp;lt;br&amp;gt;' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-62' vertex='1'&gt;
            &lt;mxGeometry x='10' y='65' width='180' height='70' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-68' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-59' target='y3w0JNk_32n-TRd_Wrkm-65' edge='1'&gt;
            &lt;mxGeometry width='50' height='50' relative='1' as='geometry'&gt;
              &lt;mxPoint x='760' y='522.5' as='sourcePoint'/&gt;
              &lt;mxPoint x='720' y='426.66666666666674' as='targetPoint'/&gt;
            &lt;/mxGeometry&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-73' value='' style='group' parent='1' vertex='1' connectable='0'&gt;
            &lt;mxGeometry x='510' y='640' width='200' height='145' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-65' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-73' vertex='1'&gt;
            &lt;mxGeometry width='200' height='145' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-66' value='Supervision' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-73' vertex='1'&gt;
            &lt;mxGeometry width='200' height='55' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-67' value='&amp;lt;font style=&amp;quot;font-size: 23px&amp;quot;&amp;gt;&amp;lt;span&amp;gt;R 0&amp;lt;/span&amp;gt;&amp;lt;br&amp;gt;&amp;lt;font style=&amp;quot;font-size: 15px&amp;quot;&amp;gt;0.0%&amp;lt;/font&amp;gt;&amp;lt;/font&amp;gt;&amp;lt;br&amp;gt;' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-73' vertex='1'&gt;
            &lt;mxGeometry x='10' y='65' width='180' height='70' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-74' value='' style='group' parent='1' vertex='1' connectable='0'&gt;
            &lt;mxGeometry x='270' y='640' width='200' height='145' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-70' value='' style='rounded=0;whiteSpace=wrap;html=1;fillColor=#FFFFFF;fontSize=15;strokeWidth=2;verticalAlign=top;fontStyle=1' parent='y3w0JNk_32n-TRd_Wrkm-74' vertex='1'&gt;
            &lt;mxGeometry width='200' height='145' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-71' value='Front Office' style='rounded=0;whiteSpace=wrap;html=1;fillColor=none;fontSize=15;strokeWidth=2;verticalAlign=middle;fontStyle=1;strokeColor=none;' parent='y3w0JNk_32n-TRd_Wrkm-74' vertex='1'&gt;
            &lt;mxGeometry width='200' height='55' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-72' value='&amp;lt;font style=&amp;quot;font-size: 23px&amp;quot;&amp;gt;&amp;lt;span&amp;gt;R 0&amp;lt;/span&amp;gt;&amp;lt;br&amp;gt;&amp;lt;font style=&amp;quot;font-size: 15px&amp;quot;&amp;gt;0.0%&amp;lt;/font&amp;gt;&amp;lt;/font&amp;gt;&amp;lt;br&amp;gt;' style='rounded=1;whiteSpace=wrap;html=1;strokeWidth=2;fillColor=#4D4D4D;fontSize=15;perimeterSpacing=0;arcSize=50;strokeColor=none;fontColor=#FFFFFF;' parent='y3w0JNk_32n-TRd_Wrkm-74' vertex='1'&gt;
            &lt;mxGeometry x='10' y='65' width='180' height='70' as='geometry'/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-75' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-65' target='y3w0JNk_32n-TRd_Wrkm-70' edge='1'&gt;
            &lt;mxGeometry width='50' height='50' relative='1' as='geometry'&gt;
              &lt;mxPoint x='760.166666666667' y='722.5' as='sourcePoint'/&gt;
              &lt;mxPoint x='720' y='722.5' as='targetPoint'/&gt;
            &lt;/mxGeometry&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id='y3w0JNk_32n-TRd_Wrkm-76' value='' style='endArrow=block;html=1;fontSize=15;fontColor=#FFFFFF;strokeWidth=2;endFill=1;edgeStyle=orthogonalEdgeStyle;curved=1;entryX=1;entryY=0.5;entryDx=0;entryDy=0;exitX=0;exitY=0.5;exitDx=0;exitDy=0;' parent='1' source='y3w0JNk_32n-TRd_Wrkm-70' target='y3w0JNk_32n-TRd_Wrkm-13' edge='1'&gt;
            &lt;mxGeometry width='50' height='50' relative='1' as='geometry'&gt;
              &lt;mxPoint x='280' y='284' as='sourcePoint'/&gt;
              &lt;mxPoint x='240' y='503' as='targetPoint'/&gt;
            &lt;/mxGeometry&gt;
          &lt;/mxCell&gt;
        &lt;/root&gt;
      &lt;/mxGraphModel&gt;
      `
        this.setState({ data: xml })
        this.LoadGraph()
  }

  LoadGraph () {
    var container = ReactDOM.findDOMNode(this.refs.divPenaltyGraph)

    // Checks if the browser is supported
    if (!mxClient.isBrowserSupported()) {
      // Displays an error message if the browser is not supported.
      mxUtils.error('Browser is not supported!', 200, false)
    } else {
      // Disables the built-in context menu
      mxEvent.disableContextMenu(container)

      // Creates the graph inside the given container
      var graph = new mxGraph(container)
      // Enables rubberband selection
      new mxRubberband(graph)

      var options = {
        attributeNamePrefix: '',
        textNodeName: '#text',
        ignoreAttributes: false,
        ignoreNameSpace: false,
        allowBooleanAttributes: false,
        parseNodeValue: true,
        parseAttributeValue: true,
        trimValues: true,
        cdataTagName: '__cdata', // default is 'false'
        cdataPositionChar: '\\c',
        localeRange: '', // To support non english character in tag/attribute values.
        parseTrueNumberOnly: false
    }

    if (parser.validate(this.state.data) === true) { // optional (it'll return an object in case it's not valid)
        var jsonObj = parser.parse(this.state.data, options)
    }
      // Gets the default parent for inserting new cells. This is normally the first
      // child of the root (ie. layer 0).
      var parent = graph.getDefaultParent()

      // Enables tooltips, new connections and panning
      graph.setPanning(true)
      graph.setTooltips(true)
      graph.setConnectable(true)
      graph.setEnabled(true)
      graph.setEdgeLabelsMovable(false)
      graph.setVertexLabelsMovable(false)
      graph.setGridEnabled(true)
      graph.setAllowDanglingEdges(false)

      graph.getModel().beginUpdate()
      try {
        // mxGrapg component
        var doc = mxUtils.createXmlDocument()
        var node = doc.createElement('Node')
        node.setAttribute('ComponentID', '[P01]')

        const items = []
          jsonObj.mxGraphModel.root.mxCell.forEach(cell =&gt; {
            if (cell.value) {
              const vertexObj = {}

              let vertex = graph.insertVertex(
                parent,
                cell.id,
                cell.value,
                cell.mxGeometry.x,
                cell.mxGeometry.y,
                cell.mxGeometry.width,
                cell.mxGeometry.height,
                cell.style
              )
              vertexObj[cell.id] = vertex
              items.push(vertexObj)
            }
          })
          const mxCellCount = jsonObj.mxGraphModel.root.mxCell.length

          for (let i = 0; i &lt;= mxCellCount; i++) {
            const cell = jsonObj.mxGraphModel.root.mxCell[i]
            if (!cell.value) {
              let sourceObject = items.filter(vertex =&gt; {
                return Object.keys(vertex) === cell.source
              })[0]
              let source = sourceObject ? sourceObject[cell['source']] : null

              let targetObject = items.filter(vertex =&gt; {
                return Object.keys(vertex) === cell.target
              })[0]
              let target = targetObject ? cell['target'] : null

              graph.insertEdge(
                parent,
                null,
                '',
                source,
                target
              )
            }
          }

        // data
      } finally {
        // Updates the display
        graph.getModel().endUpdate()
      }

      // Enables rubberband (marquee) selection and a handler for basic keystrokes
      new mxRubberband(graph)
      new mxKeyHandler(graph)
    }
  }
  render () {
    return (
      &lt;div className='graph-container' ref='divPenaltyGraph' id='divPenaltyGraph' /&gt;
    )
  }
}

export default mxGraphGridAreaEditor
</code></pre>

<p>Please Note :- The same XML works on draw.io and I am not able to catch the error in my code so any assistance in this will be appreciated</p>
