Uncaught TypeError: Cannot read properties of null (reading 'hasChildNodes')

[A3s1r-zl]

I'm getting this error and I'm not sure why

error:
Uncaught TypeError: Cannot read properties of null (reading 'hasChildNodes')
at t.value (Canvas.js:227:1)
at new XC (Network.js:138:1)
at spawnNodes (Graph.js:44:1)
at Graph (Graph.js:60:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at beginWork$1 (react-dom.development.js:27426:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)

my code:
import React, { useEffect } from 'react';
import {useDispatch, useSelector} from 'react-redux'
import { Network } from "vis-network";
import {DataSet} from "vis-data";
// import data from "../../data/vis.json";

`function Graph () {
const dispatch = useDispatch();

const visData = useSelector((state) => {
    return state.visData
})

const spawnNodes = () => {   
    if(visData){
        // console.log(data)
        let nodes = []

        nodes = new DataSet(visData["nodes"])

        let edges = new DataSet(visData["edges"])

        // create a network
        var container = document.getElementById("mynetwork");
        var data = {
            nodes: nodes,
            edges: edges,
        };
        var options = {
            nodes: {
                shape: "dot",
                size: 30,
                font: {
                size: 32,
                color: "#ffffff",
                },
                borderWidth: 2,
            },
            edges: {
                width: 2,
                arrows: "to",
            },
            physics: false
        };
        var network = new Network(container, data, options); <-- highlighted error
        dispatch({type: "INIT_NETWORK", payload: network})
        dispatch({type: "NODES_DATASET", payload: nodes})
        dispatch({type: "INIT_NODE_OPTIONS", payload: network.body.nodes})

        network.on("click", (prop) => {
            let ids = prop.nodes;
            let clickedNodes = nodes.get(ids)
            // console.log('clicked nodes:', clickedNodes[0]);
            dispatch({type: "SELECT_NODE", payload: clickedNodes[0]})
        })
    }
    
}

// useEffect(() => {
//     spawnNodes(data)
// })

return (
    <div id="mynetwork"> <-- highlighted error
        {spawnNodes()}
    </div>
);

}
export default Graph;
`

When I hover over Network, it says (alias) new Network(container: HTMLElement, data: Data, options?: Options | undefined): Network
import Network

[kukfa]

Try moving spawnNodes() outside of mynetwork? i.e. after the </div>