Estoy tratando de usar cytoscape.js en react.js pero al pasar la referencia en la función cytoscape me encuentro con algunos errores.

 var cy = cytoscape({ container: document.getElementById('cy'), boxSelectionEnabled: false, autounselectify: true, style: cytoscape.stylesheet() .selector('node') .style({ 'content': 'data(id)' }) .selector('edge') .style({ 'curve-style': 'bezier', 'target-arrow-shape': 'triangle', 'width': 4, 'line-color': '#ddd', 'target-arrow-color': '#ddd' }) .selector('.highlighted') .style({ 'background-color': '#61bffc', 'line-color': '#61bffc', 'target-arrow-color': '#61bffc', 'transition-property': 'background-color, line-color, target-arrow-color', 'transition-duration': '0.5s' }), elements: { nodes: [ { data: { id: 'a' } }, { data: { id: 'b' } }, { data: { id: 'c' } }, { data: { id: 'd' } }, { data: { id: 'e' } } ], edges: [ { data: { id: 'ae', weight: 1, source: 'a', target: 'e' } }, { data: { id: 'ab', weight: 3, source: 'a', target: 'b' } }, { data: { id: 'be', weight: 4, source: 'b', target: 'e' } }, { data: { id: 'bc', weight: 5, source: 'b', target: 'c' } }, { data: { id: 'ce', weight: 6, source: 'c', target: 'e' } }, { data: { id: 'cd', weight: 2, source: 'c', target: 'd' } }, { data: { id: 'de', weight: 7, source: 'd', target: 'e' } } ] }, layout: { name: 'breadthfirst', directed: true, roots: '#a', padding: 10 } });

Me muestra error al compilar

 TypeError: Cannot read properties of null (reading 'className') Renderer.push../node_modules/cytoscape/dist/cytoscape.cjs.js.BRp$f.init 26869 | var className = '__________cytoscape_container'; 26870 | var stylesheetAlreadyExists = document.getElementById(stylesheetId) != null; 26871 | > 26872 | if (ctr.className.indexOf(className) < 0) { | ^ 26873 | ctr.className = (ctr.className || '') + ' ' + className; 26874 | }

¿Hay alguna manera de resolver este problema?

También intenté usar Refs para resolver este problema en lugar de usar document.getElementById() pero obtuve el mismo error.