putting tag in coordinated position in image

Question

I'm trying to put tags in the coordinate position but the tags are not positioning correctly. In most case, it works but for some images, the tags go outside the image, check this image for example. Added the coords of this image below.

const coords = {
  width: 1024,
  height: 473,
  metadata: [
    {
      coordinates: { h: 473, w: 1024, x: 0, y: 0 },
    },
    {
      coordinates: { h: 214, w: 325, x: 436, y: 234 },
    }
  ],
}

Not sure if the scale factor calculation is an issue since I'm showing the image on a mobile screen.

const ImageAnnotate = ({
  imageUrl,
  maxImageHeight=300
}) => {
  const [items,setItems] = useState(coords.metadata)
  const scaleFactor = maxImageHeight / coords.height

    const calcCoords = (item) => {
    const scaledX = (item.coordinates.x || 0) * scaleFactor
    const scaledY = (item.coordinates.y || 0) * scaleFactor
    const scaledW = (item.coordinates.w || 50) * scaleFactor
    const scaledH = (item.coordinates.h || 50) * scaleFactor
    const centerX = scaledX + scaledW / 2
    const centerY = scaledY + scaledH / 2
    return { centerX, centerY }
  }

  return (
      <TouchableWithoutFeedback
        style={{
          width: '100%',
          height: maxImageHeight,
          zIndex: 1,
        }}
      >
        <ImageBackground
          source={{
            uri: imageUrl,
          }}
          style={{ width: '100%', height: maxImageHeight, zIndex: 0 }}
          resizeMode="contain"
        >
            {items.map((item, index) => {
              const { centerX, centerY } = calcCoords(item)
              return (
                <View
                  key={index}
                  style={{
                    position: 'absolute',
                    left: centerX,
                    top: centerY,
                    backgroundColor: "#075362",
                    zIndex: 1,
                    borderRadius: 15,
                    height: 30,
                    width: 30,
                    alignItems: 'center',
                    justifyContent: 'center'
                  }}
                >
                  <Text style={{ color: '#FFF', fontSize: 16 }}>{index + 1}</Text>
                </View>
              )
            })}
        </ImageBackground>
      </TouchableWithoutFeedback>
  )
}