Znacznik na mapie dodawany jest po drugim kliknieciu

Znacznik na mapie dodawany jest po drugim kliknieciu, a powinien po pierwszym kliknieciu zostać dodany. Czym to moze byc spowodowane?

state={
items:[{
      "X": 13.6155611,
      "Y": 51.0331258
    },
    ],
} 
 
componentDidMount() {
const map = new mapboxgl.Map({
      container: this.mapContainer,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [13, 51],
      zoom: 6
    })
 for (var i = 0; i < this.state.items.length; i++) {
      var obj = this.state.items[i];
      let myLatlng = new mapboxgl.LngLat(obj.X, obj.Y);
      new mapboxgl.Marker()
        .setLngLat(myLatlng)
        .addTo(map);
    }
}
 
addItem = (e) => {
    const newItem = {
      "Y": parseFloat(this.state.X),
      "X": parseFloat(this.state.Y),
}
 this.setState(prevState => ({
      items: [...prevState.items, newItem]
    }));
const map = new mapboxgl.Map({
      container: this.mapContainer,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [13, 51],
      zoom: 6
    })
 for (var i = 0; i < this.state.items.length; i++) {
      var obj = this.state.items[i];
      let myLatlng = new mapboxgl.LngLat(obj.X, obj.Y);
      new mapboxgl.Marker()
        .setLngLat(myLatlng)
        .addTo(map);
    }
e.preventDefault();
}
render() {
    return (
        <div ref={el => this.mapContainer = el} />
  
<form onSubmit={this.addItem}>
 <input
              type="number"
              value={this.state.X}
              onChange={e => this.setState({
                X: e.target.value
              })}
            />
            <input
              value={this.state.Y}
              onChange={e => this.setState({
                Y: e.target.value
              })}
            />
 <button>ADD</button>
</form>
)}