Add on Press event on react-native-svg inner element

Question

I have an XML svg like this, I want to add an onPress event on <g> tag (i want a rounded area to be a touchable not the whole SVG)

<svg xmlns="http://www.w3.org/2000/svg" >
  <g clip-path="url(#f5ijhzmn3a)" transform="translate(-141 -92)">
    <path fill="currentcolor" d="M531.555 108.16c-178.783 0-323.715 144.932-323.715 323.715h262.094a61.621 61.621 0 0 1 123.241 0h262.173c0-178.813-144.98-323.758-323.793-323.714z" transform="rotate(14 -112.125 652.114) rotate(-14 -111.729 920.901)"/>
   <path d="M-385.686-777.254a326.107 326.107 0 0 1-9.4-64.893 322.081 322.081 0 0 1 3.6-63.523 323.739 323.739 0 0 1 15.657-60.575 326.032 326.032 0 0 1 26.764-56.049 326.031 326.031 0 0 1 36.923-49.944 323.744 323.744 0 0 1 46.134-42.263 322.087 322.087 0 0 1 54.4-33 326.109 326.109 0 0 1 61.711-22.164 325.056 325.056 0 0 1 78.636-9.711 322.138 322.138 0 0 1 64.433 6.527 324.335 324.335 0 0 1 60.959 18.9 326.256 326.256 0 0 1 55.8 30.269 325.519 325.519 0 0 1 48.951 40.619 323.691 323.691 0 0 0-103.7-68.7 320.9 320.9 0 0 0-123.441-24.617 325.079 325.079 0 0 0-78.639 9.712c-171.3 42.71-277.462 217.161-236.646 388.88l-2.139.533zM-11.8-870.476a61.675 61.675 0 0 0-14.683-27.094 61.428 61.428 0 0 1 9.962 12.015 61.467 61.467 0 0 1 6.741 14.576l-2.017.5z" transform="rotate(14 -112.125 652.114) translate(465.727 1146.345)" style="mix-blend-mode:multiply;isolation:isolate" fill="#bfbfbf"/>
    </g>
 </svg>

how can i do this on react native svg package? (or any other package?)

and the last point is this xml come from the server I can set a rule for our designer but i cant hard-code the code.

here is the code right now (it wont help, just want to let you know what is the situation.)

<SvgCss
    width={200}
    height={200}
    fill="grey"
    xml={svgfile}
    onPress={() => {
     // THIS IS WRONG!
     setcolor(selectedColorCode);
    }
/>