render graph using react components

Question

I would like to create a DAG letting react take care of the rendering (using hooks for state management) and d3 only doing the calculations. Using dagre to calculate x, y and point coordinates works fine. Now i want to add arrows to the edges and for that i first need to use the dagre-d3 render() function.

But i cannot figure out how to do make the render function work with my current setup (or if it's even possible).

I have two components; GraphWrapper and DependencyGraph. GraphWrapper retrieve and holds the data, and renders the svg element. The DependencyGraph is a functional component that returns grouping elements.

GraphWrapper looks like this

    ...
    // how can i use this function with my current setup?
    const render = new dagreD3.render();

    return (
            <svg width={1200} height={750}>
                <DependencyGraph
                    nodeDataset={nodeDataset}
                    edgeDataset={edgeDataset}/>
            </svg>
    );
};

DependencyGraph:

export const DependencyGraph: React.FC<IDependencyGraph> = ({nodeDataset, edgeDataset}) => {

    const g = new dagreD3.graphlib.Graph({compound:true})
        .setGraph({rankdir: 'LR'})
        .setDefaultEdgeLabel(() => ({}) );

    nodeDataset.forEach(({id, info}) => g.setNode(id, info));
    edgeDataset.forEach(({from, to}) => g.setEdge(from, to));

    dagre.layout(g);

    return <>
        <g stroke={'#fff'} strokeWidth={1.5}>
            {g.nodes().map((v: any) => {

                const {label, width, height, x, y} = g.node(v);

                return <rect key={label} width={width} height={height} x={x - 50} y={y - 24} fill={'none'} stroke={'black'} />
            })}
        </g>

        //some more grouping elements
        ...
    </>;
}

From what i understand, i need to pass the graph through the dagre-d3 render function to add edge arrows and more stuff like that. In the dagre-d3 documentation it says:

...
// Create the renderer
var render = new dagreD3.render();

// Set up an SVG group so that we can translate the final graph.
var svg = d3.select("svg"),
    inner = svg.append("g");

// Run the renderer. This is what draws the final graph.
render(inner, g);
...

But i just don't know how to do that with my current setup. Help please? Is what i'm asking even possible?