why looping through data and plotting polygon doesn’t work

I have a array of object in which coords are present inside as a list.

const data = [
  {
    "Name": "Water",
    "Coordinates": [
      [
        57.94182777439993,
        79.50404114815193
      ],
      [
        31.209277877460135,
        78.80122177677728
      ],
      [
        31.35950051982242,
        105.15694820332524
      ],
      [
        58.17432360099434,
        105.42050546759074
      ]
    ]
  },
  {
    "Name": "Water",
    "Coordinates": [
      [
        58.72972797827911,
        76.90570777266291
      ],
      [
        29.54717721331581,
        76.37859324413196
      ],
      [
        30.460511875130663,
        105.19418747049103
      ],
      [
        59.71902258556691,
        106.7755310560839
      ]
    ]
  }
]

I tired to loop through and create polygon annotation with coords.

Code :

       data.map((poly) => {
          <Polygon positions={poly.Coordinates}>
            <Popup>{poly.Name}</Popup>
          </Polygon>;
        }

The above code doesn’t work, But when I tried to plot only the first item in the array it worked.

      <Polygon positions={data[0].Coordinates}>
        <Popup>{data[0].Name}</Popup>
      </Polygon>;

Answer

The map function returns nothing.
To return the actual components you should add a return statement:

   data.map((poly) => {
      return (
          <Polygon positions={poly.Coordinates}>
            <Popup>{poly.Name}</Popup>
          </Polygon>;
      )
    }

or use round braces instead of curly braces to return the single statement directly:

   data.map((poly) => (
      <Polygon positions={poly.Coordinates}>
        <Popup>{poly.Name}</Popup>
      </Polygon>
    )