[BUG] onPress on G only work for first child (Android Only)

the problem is in android onPress on G element working only for first child but in IOS working very well that means in bellow image only for big square top left working

Each square is like this

import * as React from 'react'
import { G, Rect, ClipPath } from 'react-native-svg'
import { View, Platform } from 'react-native'
import { Typography } from 'src/theme'
import { NodeProps } from './NodeProps'
import { NodeState } from './NodeState'

class Node extends React.Component<NodeProps, NodeState> {
  render() {
    const {
      x0,
      x1,
      y0,
      y1,
      xScaleFactor,
      yScaleFactor,
      xScaleFunction,
      yScaleFunction,
      zoomEnabled,
      url,
      treemapId,
      bgColor,
      onClick,
      id,
      label,
      depth,
    } = this.props
    const xTranslated = zoomEnabled === true ? xScaleFunction(x0) : x0
    const yTranslated = zoomEnabled === true ? yScaleFunction(y0) : y0
    const width = xScaleFactor * (x1 - x0)
    const height = yScaleFactor * (y1 - y0)
    const fSize = width < 60 ? 6.5 : width < 80 ? 8 : width < 120 ? 10 : 12
    if (depth === 0) {
      return null
    }
    const pointerEvents = Platform.OS === 'android' ? { pointerEvents: 'box-none' } : null
    return (
      <G
        // transform={`translate(${xTranslated},${yTranslated})`}
        id={id.toString()}
        x={xTranslated}
        y={yTranslated}
        onPress={(e) => {
          onClick(e, this.props)
        }}
      >
        <Rect id={'rect-' + id} width={width} height={height} rx={2} fill={bgColor} {...pointerEvents} />
        <ClipPath id={'clip-'.concat(treemapId, '-', id.toString())} {...pointerEvents}>
          <Rect width={Math.max(0, width - 5)} height={height} {...pointerEvents} />
        </ClipPath>
        <View
          style={{ width, height, alignContent: 'center', justifyContent: 'center', zIndex: 2, overflow: 'hidden' }}
          {...pointerEvents}
        >
          {width <= 20 ? null : (
            <Typography
              style={{ width, fontSize: fSize }}
              color="initial"
              align={'center'}
              text={label}
              {...pointerEvents}
            />
          )}
        </View>
      </G>
    )
  }
}

export default Node

“react-native-svg”: “^11.0.1”, “react-native”: “0.61.5”,

[mohity777]

For me worked by wrapping pie chart into Svg tag

[Elijen]

I can reproduce the same issue on iOS. When G elements are nested onPress is only working on the top level one.