Rendering graph using G6 module in Ant Design (React)

Question

I am trying to render a graph with 2708 nodes and 10000 edges using G6 module in AntV library. Although the data is fetched correctly and has the same format as the data which has been said in examples, no node and edge is shown.

This is my Graph component:

import React from 'react';
import G6 from '@antv/g6';

const Graph = ({ data }) => {
    const container = React.useRef(null);

    const mapNodeSize = (nodes, propertyName, visualRange) => {
        let minp = 9999999999;
        let maxp = -9999999999;
        nodes.forEach((node) => {
        node[propertyName] = Math.pow(node[propertyName], 1 / 3);
        minp = node[propertyName] < minp ? node[propertyName] : minp;
        maxp = node[propertyName] > maxp ? node[propertyName] : maxp;
        });
        const rangepLength = maxp - minp;
        const rangevLength = visualRange[1] - visualRange[0];
        nodes.forEach((node) => {
        node.size = ((node[propertyName] - minp) / rangepLength) * rangevLength + visualRange[0];
        });
    };

    React.useEffect(() => {
        if (data) {
        const width = container.current.scrollWidth;
        const height = container.current.scrollHeight || 500;
        const graph = new G6.Graph({
            container: container.current,
            width,
            height,
            // ... other graph options
            defaultNode: {
                size: 2,
                style: {
                    fill: '#C6E5FF',
                    stroke: '#5B8FF9',
                    lineWidth: 0.3,
                },
                labelCfg: {
                    style: {
                    fontSize: 3,
                    },
                    position: 'right',
                    offset: 1,
                },
            },
            defaultEdge: {
                size: 0.1,
                color: '#333',
            },
            nodeStateStyles: {
                selected: {
                    fill: 'steelblue',
                    stroke: '#000',
                    lineWidth: 1,
                },
            },
            modes: {
                default: [
                    {
                    type: 'zoom-canvas',
                    enableOptimize: true,
                    optimizeZoom: 0.9,
                    },
                    {
                    type: 'drag-canvas',
                    enableOptimize: true,
                    },
                    'drag-node',
                    'brush-select',
                ],
            },
        });
        mapNodeSize(data.nodes, 'degree', [1, 10]);
        graph.data(data);
        console.log("THE GRAPH IS: ", graph);
        graph.render();

        const graphData = graph.save();
        }
    }, [data]);

    return <div ref={container}></div>;
};

export default Graph

I have called this component in GeneralAnalysis component:

import Graph from './Graph';

const GeneralAnalysis = () => {

    const [data, setData] = React.useState(null);


    // fetch the data and set the state
    React.useEffect(() => {
        fetch('http://127.0.0.1:8000/api/v1/convert_graph/')
        .then((res) => res.json())
        .then((data) => setData(data));
        
    }, []);

    

    if (data) {
        console.log("THE GRAPH DATA IS ", data);
    }

    return (
        <div>
            <Container style={{ paddingTop: "3rem", paddingBottom: "2rem", marginLeft: "17rem" }}>
                <Grid container spacing={3}>
                    
                    <Grid item xs={12} sm={12} md={12} sx={{marginBottom:'3vh'}} >
                        <Item>
                            <h1>My Graph</h1>
                        </Item>
                    </Grid>
                    <Grid item xs={12} sm={12} md={12} sx={{marginBottom:'3vh'}} >
                        <Card sx={{ bgcolor: 'white', height: 'max-content' }}>
                            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                                <Stack>
                                    <Item>
                                        <Box sx={{ display: 'flex', alignItems: 'center', mt: "0.5rem" }}>
                                            <Graph data={data} />
                                        </Box>
                                    </Item>
                                </Stack>
                            </Box>
                        </Card>
                    </Grid>
                </Grid>
            </Container>
        </div>
    );
};

export default GeneralAnalysis;

And this is a link to my whole front-end project. And also the back-end side.

This is the logs which are written in console:

Output: