wybranie opcji w select ma wywoływać metodę

Witam, jak zrobić, aby po wybraniu opcji w select wykonała się metoda? Konkretnie w każdej opcji mam przechowane(name,description,x,y)
name,description - do popup wyswietla się nazwa z opisem
x,y - wspolrzedne markera ktory pojawi się na mapie.

Tutaj mam mechanizm "historii" :

state = {
    Name: '',
    Description: '',
    X: '',
    Y: '',
    elements: [],
    history: [],
    currentHistoryIndex: 0
}

 // tutaj zapisujemy wpisy w historii
  handleOnHistoryPush = () => {
    this.setState({ history: ([...this.state.history, this.state.elements]) });
    this.setState({ elements: ([]) });
  };
  // dodajemy kolejny element do aktualnych elementów
  appendElement = (Name, Description, X, Y) => this.setState({ elements: ([...this.state.elements, { Name, Description, X, Y }]) });
render(){
return(
<div ref={el => this.mapContainer = el}' ></div>
<input
              value={this.state.Name}
              onChange={e => this.setState({
                Name: e.target.value
              })}
            />
<input
              value=Description
              onChange={e => this.setState({
                Description:e.target.value
              })}
            />
<input
              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
              })}
            />

<div style={{ display: 'flex', flexDirection: 'row' }}>
          <div>
            Wpisy<br />
            <button onClick={() => this.appendElement(this.state.Name, this.state.Description, this.state.Y, this.state.X)}>Dodaj</button>
            <button onClick={this.handleOnHistoryPush}>Zapisz</button>
            <ul>
              {this.state.elements.map(element => (

                <p>{`Nazwa: ${element.Name} opis: ${element.Description} X: ${element.X} Y: ${element.Y} `}</p>

              ))}
            </ul>
          </div>
          <div>
            Historia<br />
            <select onChange={event => this.setState({ currentHistoryIndex: event.currentTarget.value })}>
              {
                this.state.history.map((_, index) => <option key={index} value={index}>{index}</option>)
              }
            </select>
            {this.state.history[this.state.currentHistoryIndex] && (
              <ul>
                {this.state.history[this.state.currentHistoryIndex].map(historyRecord => <p>{`${historyRecord.Name} ${historyRecord.Description} ${historyRecord.Y} ${historyRecord.X}`}</p>)}
              </ul>
            )}
          </div>
        </div>
)
}

W kazdej opcji siedzą dane i chciałym aby np uzytkownik który wcisnie opcje nr 1
miał by wyswietlane na mapie opcje które w niej siedzą czyli w tym przypadku np majac 3 punkty(x,y) wyswietli na mapie te 3 markery.
Tutaj mam napisaną metodę do wyświetlania tych punktów, tylko nie wiem jak to mogę teraz połączyć:

 const map = new mapboxgl.Map({
      container: this.mapContainer,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [50, 100],
      zoom: 10,
    })
for (var i = 0; i < this.state.history[currentHistoryIndex].length; i++) {
      var obj = this.state.items[i];
      let myLatlng = new mapboxgl.LngLat(obj.X, obj.Y);
      new mapboxgl.Marker()
        .setLngLat(myLatlng)
        .addTo(map);
    }

Przecież już obsługujesz zmianę wartości selecta

<select onChange={event => this.setState({ currentHistoryIndex: event.currentTarget.value })}>

Po prostu dodaj tutaj wywołanie kolejnej metody.

ale nie wychodzi tak jak myślę, w this.state.history mam np: [array(5),array(1),array(7)]
sprawdzajac w konsoli nie pokrywa mi się index mianowicie w react developers tools mam np currentHistoryIndex: 1 a w konsoli mam 0 ,jak wcisne 2 to w react developers mam 2 a w konsoli 1. Moze wiesz co jest przyczyna?

handleSelect = (event) => {

    this.setState({ currentHistoryIndex: event.currentTarget.value })

    console.log(this.state.currentHistoryIndex)
  

  }

 <select onChange={this.handleSelect}>

setState nie zmienia obiektu od razu.
Wyświetl sobie w renderze <div>{this.state.currentHistoryIndex}</div> zobaczysz że wartość będzie aktualna.
https://reactjs.org/docs/react-component.html#setstate