Make d3 svg the same size as grid container

Question

I have a graph that I created from a dot using d3-graphviz in a react app.

The documentation says that the SVG size determines the area in which the graph can be panned and zoomed. I want to make the svg the same size of the grid that contains it, in order to be able to zoom and pan without having the graph cut off. In the next image you can see that the blue area is the size of the svg and the gray area is the grid container.

Here you can see how the graph is cut off if I zoom in or drag it down.

        const transition = d3.transition().delay(100).duration(1000)

        d3.select('#graph')
        .graphviz(false)
        .options({
            zoom: true,
            zoomScaleExtent: [0.25, 4],
            width: '100%',
            fit: true,
            center: true,
        })
        .transition(transition)
        .renderDot('digraph {a -> b}')




return (
   <MuiGrid id="graph">
   </MuiGrid>
)

Could someone please guide me on what to change or do in order to accomplish what I need?