reactjs - キャッチされていない TypeError: 未定義のプロパティ 'getBBox' を読み取ることができません

Question

コンポーネントにフローチャートを表示しようとしていますが、未定義のプロパティを読み取れないと表示されています。componentDidMountメソッドのコンテンツをrender メソッドに移動すると、エラーは表示されず、画面にも何も表示 (印刷) されません。

class Flowchart extends React.Component {
    constructor(props){
        super(props);
        this.svgRef=React.createRef();
        this.in=React.createRef();
        this.rdr={};
        this.svg={};
        this.graph={}
        this.inner={}
    }

    initStagesGraph(stages){
        this.svg = d3.select(this.svgRef.current)
        this.inner = this.svg.select("g")
        console.log(this.inner)
        this.rdr = new dagreD3.render();
        this.graph = new dagreD3.graphlib.Graph().setGraph({});
        _.forEach(stages,(stage)=>{
          this.graph.setNode(stage._id , { label:stage.title})
        })
        this.graph.setEdge("1","2",{label:"open"})
        this.graph.setEdge("2","1",{label:"Closed"})
        var zoom = d3.zoom().on("zoom", ()=> {
          this.inner.attr("transform", "translate(" + d3.event.translate + ")" +
          "scale(" + d3.event.scale + ")");
          });
        this.graph.nodes().forEach(v=> {
          var node = this.graph.node(v);
          node.rx = node.ry = 5;
        })
        this.svg.call(zoom)
        this.rdr(this.inner,this.graph);
      }
      componentDidMount(){
      const {stage}=this.props
      this.initStagesGraph(stage)
      }
    render() {           
        return (
            <div>
                <h2 className="heading-bdr">Flowchart</h2>
                <div className="workflow-chart">
                    <div className="col-sm-12">
                        <div className="live map">
                            <svg ref={this.svgRef}>
                              <g />
                            </svg>
                            <p>This is the flowchart component</p>
                        </div>
                    </div>
                </div>
        </div>
        )
    }
}