Tree not centering when using renderCustomNodeElement prop

[nadavq]

I am using the Tree element as follows (the dimensions object fixed values are only for testing):

 <Tree
                    data={treeData}
                    orientation="vertical"
                    enableLegacyTransitions={true}
                    dimensions={{width: 1056, height: 489}}
                    renderCustomNodeElement={(rd3tProps) => {
                        return <SingleTreeNode {...rd3tProps} />
                        }
                    }
                    rootNodeClassName={classes.treeNode}
                    branchNodeClassName={[classes.node__branch, classes.treeNode].join(' ')}
                    leafNodeClassName={classes.treeNode}
                    pathClassFunc={() => classes.customLink}
                    {...nodeProps}
                />

My SingleTreeNode component is as follows:

<g onClick={onClickNode}>
           <rect r={15}></rect>
           <animate attributeName="opacity"
                    values="0;1" dur="300ms"/>
           <foreignObject {...foreignObjectProps} style={{overflow: 'visible'}}>
               <div ref={ref} className={['node-inner-container', classes.glass, classes.nodeInnerContainer].join(' ')} id={id} onMouseEnter={onHoverNode}
                    onMouseLeave={onUnHoverNode}>
                   <h3 style={{textAlign: "center"}}>{nodeDatum.name}</h3>
                   <p>{nodeDatum.attributes && nodeDatum.attributes.description ? nodeDatum.attributes.description : ""}</p>
               </div>
           </foreignObject>
       </g>

Unfortunately on clicking a node it doesn't center the tree, but when I remove the 'renderCustomNodeElement' prop it does.