I would like to add a marker to the map using the form. Can anyone help me? Installing the map works. I want to display markers after entering x and y, and read this data from the table. I have 2 inputs, one for X and the other for Y after clicking "add" I add this data to the table and I have 2 objects, etc ... but only one marker from state.items is displayed on the map, although I have more coordinates in the table.I know that the componentDidMount () method is only run once and here is the problem.Please Help

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]
}));

}
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 (

this.mapContainer = el} />

this.setState({
X: e.target.value
})}
/>
this.setState({
Y: e.target.value
})}
/>

)}