Mapa nie widzi danych z tablicy

Po zamontowaniu mapki na moją stronke

state={
items:[{
      "X": 13.6155611,
      "Y": 51.0331258
    },
    ],
}
componentDidMount() {
    const map = new mapboxgl.Map({
      container: this.mapContainer,
      center: [this.state.lng, this.state.lat],
      zoom: this.state.zoom,
    });
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);
    }
}

 render() {
    return (
        <div ref={el => this.mapContainer = el} />
)}

Chciałbym wyswietlac markery po wpisaniu x i y, i czytac te dane z tablicy. Mam 2 inputy jeden dla X drugi dla Y po kliknieciu przycisku "add"
dodaje mi do tablicy te dane i mam 2 obiekty itp.. ale na mapie wyswietla mi się tylko jeden marker ten na sztywno wpisany w state.items mimo, z w tablicy mam wiecej wspolrzednych. Proszę o pomoc

Metoda componentDidMount() jest uruchamiana tylko raz i tutaj jest problem.

Stwórz state, który jest tablicą. Tam wstawiaj współrzędne. Wew. render() wyświetlaj markery. Możesz też robić to dynamicznie wew. event-u dot. potwierdzania współrzędnych.

Sprobowałem zrobić to w taki sposob, ale teraz za jazdym razem gdy klikne Add tworzy mi nową mapke i np. jak klikne 3 razy add to markery mi dodaje ale przy okazji tworzy mi 3 mapy na stronie..

state={
items:[{
      "X": 13.6155611,
      "Y": 51.0331258
    },
    ],
}
 
 addItem = (e) => {
    e.preventDefault();
    const newItem = {
      "Y": parseFloat(this.state.X),
      "X": parseFloat(this.state.Y),
    };
    this.setState(prevState => ({
      items: [...prevState.items, newItem]
    }));
 
  }
componentDidUpdate(prevProps, prevState, snapshot) {
  if (this.state.items.length !== prevState.items.length) {
    const map = new mapboxgl.Map({
      container: this.mapContainer,
      center: [this.state.lng, this.state.lat],
      zoom: this.state.zoom,
    });
    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);
    }
  }
}
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>
)}