Rotating & hiding <Text /> in Sunburst

[andandio]

I've created a zoomable Sunburst visualization in React Typescript that's functionally working well. However, when I attempt to rotate the text, using a function I've used in the past with D3, the rotation is off.

The function is:

 const rotateText = (d:any) => {
    let angle = (d.x0 + d.x1) / Math.PI * 90;
    return (angle < 180) ? angle - 90 : angle + 90;
  }

angle in regular d3 returned values between 0 -360, but in my visx Sunburst, it's only returning values between 0 - 57.
Here's the function in which each node is rendered:

const renderNode = (node:any,i:number) => {
    let n = node.parent ? node.data.name : ""
    let xy = arc.centroid(node)
    let rotate = rotateText(node)
    return (
      <g className="node">
        <path
          d={arc(node)!}
          stroke="#fff"
          fill={color((node.children ? node.data : node.parent.data).name)}
          fillRule="evenodd"
          onClick={() => handleClick(node)}
          key={`node-${i}`}
        />
        <Text verticalAnchor="start"
              dx={xy[0]-20}
              dy={xy[1]+5}
              angle={rotateText(node)}
              fontSize={8}
              >
             {n}
        </Text>
      </g>
    )
  }

The other problem I'm having is that while zoom events hide unselected parts of the node tree (the <Text /> parent), the text from those nodes is still visible. Am I missing something?

UPDATE:

I got the text to rotate properly on first render with:

var x = d3.scaleLinear()
            .range([0, 2 * Math.PI]);

  const getAngle = (d:any) => {
    return (x((d.x0 + d.x1)/2) - Math.PI / 2) / Math.PI * 180;
  }

  const rotateText = (d:any) => {
    let angle = getAngle(d)
    return (angle < 90 || angle > 270) ?  angle : 180 + angle ;
  } 

and I got the text to hide on zoom by checking for an existing parent path before rendering:

if ( ((Math.max(0, Math.min(2 * Math.PI, xScale(node.x1)))) - (Math.max(0, Math.min(2 * Math.PI, xScale(node.x0))))) > 0 ){
      text = <Text verticalAnchor="middle"
                 textAnchor="middle"
                 dx={positionTextX(node, xy)}
                 dy={positionTextY(node, xy)}
                 fontSize={formatTextSize(node)}
                 angle={rotateText(node)}
                 key={keyCreator()}
                 >{n}</Text>
    }

I still don't get why my rotateText(node) function doesn't recalculate on zoom. The angles are messed up with each subsequent zoom until I return to the starting level.

[andandio]

The x0, x1, y0, y1 variables don't update on zoom, so my rotateText() function wasn't updating after zooming. Instead, I moved rotation into state, and then inside a useLayoutEffect() hook, found radians to arc.centroid and assigned the rotation:

 useLayoutEffect(() => {
   let arcAngle = arc.centroid(node)
   let radians = Math.atan2(arcAngle[1], arcAngle[0])
   let degrees = radians * 57.2958
   let rotation =  (degrees < 90 && degrees > -90) ?  degrees : 180 + degrees ;
   setTextRotation(rotation)
  },[pathRef])