const polygonVertices = item.shape.points[0].map(point =>
  webMercatorUtils.lngLatToXY(point[0], point[1])
);

// Calculate the center point of the polygon
const centerX = polygonVertices.reduce((sum, point) => sum + point[0], 0) / polygonVertices.length;
const centerY = polygonVertices.reduce((sum, point) => sum + point[1], 0) / polygonVertices.length;

// Create a center point graphic
const centerPointGraphic = new Graphic({
  geometry: new Point({
    x: centerX,
    y: centerY,
    spatialReference: {
      latestWkid: 3857,
      wkid: 102100
    }
  }),
  symbol: {
    type: 'simple-marker',
    style: 'circle',
    color: [255, 0, 0],  // Red color for the center point
    size: 10  // Adjust the size of the center point as needed
  }
});

// Create the polygon graphic
const polygonGraphic = new Graphic({
  geometry: new Polygon({
    rings: polygonVertices,
    spatialReference: {
      latestWkid: 3857,
      wkid: 102100,
    },
  }),
  symbol: {
    type: 'simple-fill',
    style: 'solid',
    color: [105, 105, 105, 0.5],
    outline: {
      color: [255, 255, 255],
      width: 2,
    },
  },
});

// Add both the polygon and center point graphics to the map
graphicsLayer.addMany([polygonGraphic, centerPointGraphic]);