React SVG Rendering Optimization

Question

I made a globe map with react-simple-maps, did my best to optimize the rendering but still slow with complex json.

steps to reproduce

1. drag/zoom the globe, check performance
2. change top radio input to regions (more complex json)
3. drag/zoom the globe (if you can)

how to avoid 'out of screen rendering'?

is there anyway to improve rendering performance while dragging the globe?

my last try:

export function useCameraCenterDistance() {
  const {
    center: [x, y],
  } = useCameraContext()
  return useCallback(
    (point: Coord) => {
      const distance = getDistance([x, y], point)
      return reflect(distance, 180)
    },
    [x, y]
  )
}