How to search the JSX file in react native

Question

I have a svgComponent JSX file in react native. in that I have almost 200 path components. i want to plot some circle on this world map based on data getting from API.

how to search the path component and get cx and cy values from path in JSX,given my JSX and API data?

import * as React from "react";
import { moderateScale } from "react-native-size-matters";
import Svg, { Rect, Path, Circle } from "react-native-svg";

function SvgComponent({ props, regions }) {
  return (
    <Svg
      height={250.76015857284443}
      width={375}
      xmlns="http://www.w3.org/2000/svg"
      style={{
        // position: "relative",
        top: moderateScale(30),
        alignSelf: "center",
      }}
      viewBox="0.2943508424182359 0.2943508424182359 600 256.76015857284443"
      preserveAspectRatio="xMinYMin"
      overflow="hidden"
      {...props}
    >
      <Rect
        x={-4035.01}
        y={-1726.15}
        width={10090}
        height={4317.85}
        rx={0}
        ry={0}
        fill="none"
        transform="scale(.2973)"
        style={{
          WebkitTapHighlightColor: "transparent",
        }}
        fillOpacity={0}
      />
      <Path
        fill="#88a4bc"
        stroke="#fff"
        d="M346.86 200.232h-1.219l-.09-.863-.178-.862-.119-.684.417-2.11-.327-1.368-.654-2.676 1.843-2.17.505-1.368.238-.178.268-1.13-.238-.565.119-1.427.386-1.308.12-2.438-.833-.594-.803-.149-.327-.475-.773-.387-1.397.03-.06-.714-.119-1.367 5.114-1.576.951.922.446-.179.654.476.06.773-.387.892.06 1.338 1.04 1.189.565-1.338.743-.387-.03-2.467-.653-1.368-.565-.624h-.12l-.178-2.17.446-1.814.654-.06 1.992.536.446-.238 1.16-.06.624-.564 1.01.03 1.844-.744 1.368-1.1.267.833-.148 1.902.148 1.695-.06 2.973.239.922-.565 1.367-.714 1.338-1.1 1.19-1.575.713-1.933.921-1.962 2.052-.654.356-1.249 1.368-.684.416-.237 1.368.713 1.457.268 1.1v.594l.297-.119-.149 1.873-.327.892.357.327-.297.803-.714.684-1.397.624-2.051 1.04-.744.714.09.803.386.119z"
        className="sm_state sm_state_MZ"
        strokeWidth={1.124908875}
        strokeLinejoin="round"
        style={{
          WebkitTapHighlightColor: "transparent",
        }}
        opacity={1}
        cursor="pointer"
        strokeOpacity={1}
        fillOpacity={1}
      />
      {/* {2 path compoents} */}

      {/* {...3 path compoents} */}

      {/* {...200 path compoents} */}

      <Circle cx={35.32} cy={112.766} r={92 / 9} fill={"red"} />
    </Svg>
  );
}

export default SvgComponent;

And my API data is like this

[
   {
      "id":"US",
      "name":"UNITED STATES",
      "value":3.2
   },
   {
      "id":"GB",
      "name":"UNITED KINGDOM",
      "value":95.86
   },
   {
      "id":"ZA",
      "name":"SOUTH AFRICA",
      "value":0.92
   }
]