react map gl custom markers don 27t stay at exact position on zoom

1import React, {PureComponent} from 'react';
2
3const ICON = `M20.2,15.7L20.2,15.7c1.1-1.6,1.8-3.6,1.8-5.7c0-5.6-4.5-10-10-10S2,4.5,2,10c0,2,0.6,3.9,1.6,5.4c0,0.1,0.1,0.2,0.2,0.3
4  c0,0,0.1,0.1,0.1,0.2c0.2,0.3,0.4,0.6,0.7,0.9c2.6,3.1,7.4,7.6,7.4,7.6s4.8-4.5,7.4-7.5c0.2-0.3,0.5-0.6,0.7-0.9
5  C20.1,15.8,20.2,15.8,20.2,15.7z`;
6
7const pinStyle = {
8  cursor: 'pointer',
9  fill: '#d00',
10  stroke: 'none'
11};
12
13export default class CityPin extends PureComponent {
14
15  render() {
16    const {size = 20, onClick} = this.props;
17
18    return (
19      <svg 
20        height={size}
21        viewBox="0 0 24 24"
22        style={{...pinStyle, transform: `translate(${-size / 2}px,${-size}px)`}}
23        onClick={onClick}
24      >
25        <path d={ICON}/>
26      </svg>
27    );
28  }
29}