Hammerjs и React: обнаружение конца события защемления

Мне нужно уметь определять «конец» события защемления. Кажется, что с Hammerjs это должно быть легко, но вместо этого я получаю несколько событий защемления. Кроме того, похоже, что для одного из событий защемления должен быть установлен флаг event.isFinal, но этого не происходит.

Базовая структура приложения React выглядит так

class App extends React.Component {

    state = {   urls: [],
                header:[""] };

    render() {
        return (<div>
                    {this.state.header.map(item => <span>{item}<br/></span>)}
                    <div className = "grid" ref = {elem => this.gridElement = elem}>
                        {this.state.urls.map(entry => {
                            const fullSizeUrl = imageURL + entry.slice(0,-1-sizeEnding.length) + '.jpg'
                            return (<div className = "cell" key = {fullSizeUrl}>
                                        <a href = {fullSizeUrl}><img src = {imageURL + entry} className = "responsive-image"/></a>
                                    </div>)
                            })
                        }
                    </div>
                </div>);
    }

    selectSize = urls => {
        return urls.reduce(function (correctSizeUrls, url) {
            if (url.endsWith(sizeEnding)) {
                correctSizeUrls.push(url);
            }
            return correctSizeUrls;
        }, []);
    };

    doLog = ( text, event ) => {
        // this.setState({header: text + '\n' + stringify(event).replace(",","\n")});
        this.setState(state => {
                        const header = text + ':' + event.type + ", " + event.scale+ ", " + event.isFirst + ", " + event.isFinal;
                        let newHeader = this.state.header.slice();
                        console.info(newHeader);
                        newHeader.push(header);
                        return {header: newHeader};
                        }
                    );
    } 

    swipeleft = event => {
        this.doLog("swipeleft", event);
    } 

    swiperight = event => {
        this.doLog("swiperight", event);
    } 

    pinch = event => {
        this.doLog("pinch", event);
    }

    componentDidMount() {
        this.hammer = Hammer(this.gridElement)
        this.hammer.get('pinch').set({ enable: true });
        this.hammer.on("pinch", this.pinch);
        this.hammer.on('swipeleft', this.swipeleft);
        this.hammer.on('swiperight', this.swiperight);
        fetch(url)
            .then(data => data.json())
            .then(data => this.selectSize(data))
            .then(data => this.setState({urls: data}));
    }
}

ReactDOM.render(<App/>, document.getElementById("root"));

Единственная причина этой чуши header - попытаться раскрыть то, что доступно в этих событиях hammerjs. Я пытаюсь протестировать на мобильном устройстве, поэтому использование заголовка, такого как console.info, помогает мне видеть, что происходит.