React Canvas error

When i fetch the xml from camunda using “engine-rest/process-definition/{id}/xml” i send the data to a react component but “Canvas.js” throws an error
i have checked that the format of bpmn xml is correct
this is the bpmn which i am sending to the js file it seems to be correct format since the camunda modeler is able to open it correctly
bpmn.bpmn (10.6 KB)

const viewer = new BpmnViewer({
container: ReactDOM.findDOMNode(document.querySelector("#BpmnDiagramCanvas"))
});
viewer.importXML(xml);
viewer.get(‘canvas’).zoom(‘fit-viewport’);

Canvas.js:1220 Error: attribute transform: Expected number, “matrix(1,0,0,1,NaN,NaN)”.
setCTM @ Canvas.js:1220
(anonymous) @ Canvas.js:1095
Canvas._changeViewbox @ Canvas.js:950
Canvas.scroll @ Canvas.js:1090
(anonymous) @ DrilldownCentering.js:40
invokeFunction @ EventBus.js:519
EventBus._invokeListener @ EventBus.js:371
EventBus._invokeListeners @ EventBus.js:352
EventBus.fire @ EventBus.js:313
Canvas._setRoot @ Canvas.js:721
Canvas.setRootElement @ Canvas.js:658
Canvas.getRootElement @ Canvas.js:546
Selection.select @ Selection.js:82
(anonymous) @ Selection.js:30
invokeFunction @ EventBus.js:519
EventBus._invokeListener @ EventBus.js:371
EventBus._invokeListeners @ EventBus.js:352
EventBus.fire @ EventBus.js:313
Diagram.clear @ Diagram.js:202
BaseViewer.clear @ BaseViewer.js:532
(anonymous) @ BaseViewer.js:306
open @ BaseViewer.js:286
(anonymous) @ CompatibilityUtil.js:53
(anonymous) @ BaseViewer.js:232
importDefinitions @ BaseViewer.js:228
(anonymous) @ CompatibilityUtil.js:53
(anonymous) @ BaseViewer.js:160
Promise.then (async)
(anonymous) @ BaseViewer.js:144
importXML @ BaseViewer.js:138
(anonymous) @ CompatibilityUtil.js:53
openDiagram @ diagram.js:23
render @ diagram.js:33
finishClassComponent @ react-dom.development.js:17485
updateClassComponent @ react-dom.development.js:17435
beginWork @ react-dom.development.js:19073
beginWork$1 @ react-dom.development.js:23940
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
scheduleUpdateOnFiber @ react-dom.development.js:21893
enqueueSetState @ react-dom.development.js:12467
Component.setState @ react.development.js:365
Body.setDiagram @ body.js:14
(anonymous) @ processdefinitionstable.js:57
Promise.then (async)
getXmlData @ processdefinitionstable.js:46
onClick @ processdefinitionstable.js:86
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4070
executeDispatch @ react-dom.development.js:8243
processDispatchQueueItemsInOrder @ react-dom.development.js:8275
processDispatchQueue @ react-dom.development.js:8288
dispatchEventsForPlugins @ react-dom.development.js:8299
(anonymous) @ react-dom.development.js:8508
batchedEventUpdates$1 @ react-dom.development.js:22396
batchedEventUpdates @ react-dom.development.js:3745
dispatchEventForPluginEventSystem @ react-dom.development.js:8507
attemptToDispatchEvent @ react-dom.development.js:6005
dispatchEvent @ react-dom.development.js:5924
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
discreteUpdates$1 @ react-dom.development.js:22413
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889

Can you please provide more context? Feel free to share a CodeSandbox demonstrating the issue.