odczytanie wartości z tablicy w ktorej są tablice - problem z pętlą

Mapa wyświetla trasy składające się ze znaczników. Używam mapboxa. Mam 4 inputy, do których dodaje {Name, Description, X, Y}. Jeśli tablica history ma tablicę dłuższą niż 4/5, występuje błąd TypeError error: Cannot read property 'X' of undefined. Myślę, że robię błąd pętli. Proszę o pomoc

state= {
history: [],
elements:[],
currentHistoryIndex:0
}
handleOnHistoryPush = () => {
    this.setState({ history: ([...this.state.history, this.state.elements]) });
    this.setState({ elements: ([]) });
  };
 
  appendElement = (Name, Description, X, Y) => this.setState({ elements: ([...this.state.elements, { Name, Description, X, Y }]) });

handleSelect = (event) => {
    const map = new mapboxgl.Map({
      container: this.mapContainer,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [-77.04, 38.907],
      zoom: 11.15
    })

    const loop = () => {
      for (var i = 0; i < this.state.history[this.state.currentHistoryIndex].length; i++) {
        var obj = this.state.history[i][i];
        let myLatlng = new mapboxgl.LngLat(obj.X, obj.Y);
        new mapboxgl.Marker()
          .setLngLat(myLatlng)
          .setPopup(new mapboxgl.Popup({ offset: 25 })
            .setHTML('<h3>' + obj.Name + '</h3><p>' + obj.Description + '</p>'
            ))
          .addTo(map);
      }
    }
    this.setState({ currentHistoryIndex: event.currentTarget.value }, loop)
  }

render(){
return(
<>
<div ref={el => this.mapContainer = el}></div>
<div style={{ display: 'flex', flexDirection: 'row' }}>
          <div>
            Posts<br />
            <button className="btn" onClick={() => this.appendElement(this.state.Name, this.state.Description, this.state.Y, this.state.X)}>Add</button>
            <button className="btn" onClick={this.handleOnHistoryPush}>Save</button>
            <ul>
              {this.state.elements.map(element => (

                <li key={element.Name}>{`Name: ${element.Name}`}</li>

              ))}
            </ul>
          </div>
          <div>
            History<br />
            <select onChange={this.handleSelect}>
              {
                this.state.history.map((_, index) => <option key={index} value={index}>Route: ${index}`}</option>)
              }
            </select>
            {this.state.history[this.state.currentHistoryIndex] && (
              <ul>
                {this.state.history[this.state.currentHistoryIndex].map(historyRecord => <li key={historyRecord.Name}>Name ${historyRecord.Name}`}</li>)}
              </ul>
            )}
          </div>
        </div>
</>
)
}

Pewnie zamiast var obj = this.state.history[i][i] powinno być var obj = this.state.history[this.state.currentHistoryIndex][i]
btw zamiast zwykłego for możesz użyć for of

for (let obj of this.state.history[this.state.currentHistoryIndex]) {
    //// var obj = this.state.history[i][i];// wtedy to jest zbędne
    let myLatlng = new mapboxgl.LngLat(obj.X, obj.Y);
    ...

Powinieneś też nauczyć się debugować, wtedy szybciej znajduje się błędy sprawdź tu