Центрирование карты по нажатому символу с помощью Mapbox в приложении React

Question

Я пытаюсь интегрировать функцию Mapbox - «Центрировать карту по нажатому символу» в приложении React, используя этот пример: ссылка , однако у меня возникают некоторые проблемы;события: click, mouseenter и mouseleave не работают / стреляют. Вот эта часть кода:

     // Center the map on the coordinates of any clicked symbol from the 'symbols' layer.
  map.on('click', 'symbols', function (e) {  map.flyTo({center: e.features[0].geometry.coordinates});
  // console.log('I am inside centering icon')
  });

  // Change the cursor to a pointer when the it enters a feature in the 'symbols' layer.
  map.on('mouseenter', 'symbols', function () {
  map.getCanvas().style.cursor = 'pointer';
  });


  // Change it back to a pointer when it leaves.
  map.on('mouseleave', 'symbols', function () {
  map.getCanvas().style.cursor = '';

Обратите внимание, что приведенный выше код относится к методу componentDidMount().