React.js invisible/pseudo renders of a Component possible?

this is a weird one, and I am a react beginner, so please be patient with me.

I am rendering a tree with the react-d3-tree library like this:

//Component in question:
<Tree
        [other props...]
        renderCustomNodeElement={renderBTreeNode}
        nodeSize={{ x: biggestWidth + 10, y: rectHeight * 3 }}
/>

 //State, so that the Tree rerenders if we get a new biggestWidth
  const [biggestWidth, setBiggestWidth] = useState(0);

 //Custom node render function
 const renderBTreeNode = ({ nodeDatum, toggleNode }) => {
      const keyStrings = nodeDatum.name.keys;
      const [rectWidth, sub_node_width] = widthCalculations(keyStrings);
                     //also updates biggestWidth, if it is a new high
      [...]
 }

But I have a custom render function for my nodes, and they are all of different width. I cannot determine the biggestWidth beforehand, so the state biggestWidth is updated while the Tree renders the nodes one by one. This of course leads me to see the tree twitching a bit(milliseconds), until the biggest width is found and that will trigger the last rerender. I just want to see the last render, not the twitching beforehand.

I tried rendering the tree once invisible(to find the biggestWidth) and another time visible like this:

<div className="double-render-tree-wrapper">
      <Tree
        className="invisible-tree"
        [...props]
      />
      <Tree
        [...props]
      />
</div>

with the following css:

.double-render-tree-wrapper {
  width: 100%; 
  height: 100%; 
}

.invisible-tree {
  opacity: 0;
  pointer-events: none;
}


/* Position the visible tree on top of the invisible tree */
.dual-tree-wrapper > .rd3t-tree {
  top: 0;
  left: 0;
  z-index: 1; 
}

I know it is a bad attempt, and it had no effect unfortunately. Can you help me to come up with a better Idea?