Листовка React, показывающая непредвиденную ошибку токена createRef в примере

Я использую пример реагирующей листовки events.js из github и получаю следующую ошибку:

Syntax error: Unexpected token (23:26)

  21 |   }
  22 | 
> 23 |   mapRef = createRef<Map>()
     |                           ^
  24 | 
  25 |   handleClick = () => {
  26 |     const map = this.mapRef.current

Я изменил строку импорта в events.js на

import { Map, TileLayer, Marker, Popup } from 'react-leaflet';

и мой App.js выглядит так:

import React, { Component } from 'react';
import './App.css';
import './myLeaflet.css';
import './leaflet.css';

import SimpleExample from './simple';
import TooltipExample from './tooltip';
import DraggableExample from './draggable-marker';
import WMSTileLayerExample from './wms-tile-layer';
import EventsExample from './events';
class App extends Component {
  render() {
    return (
      <div className="App">
          <EventsExample/>
      </div>
    );
  }
}

export default App;

myLeaflet.css содержит это:

h1, h2, p {
  text-align: center;
}
.leaflet-container {
  height: 400px;
  width: 80%;
  margin: 0 auto;
}

есть идеи, почему это происходит?