reactjs - NavigationControl 中的旋转控制在 react-map-gl 中不起作用

Question

我遇到了旋转控制不适用于 react-map-gl 的问题。地图渲染没有问题，放大/缩小控件工作正常，但旋转控件没有做任何事情。我查看了文档，但我看不到问题。这是我的代码：

import React, { Component } from 'react';
import ReactMapGL, { NavigationControl } from 'react-map-gl';
import styles from './styles/ViewMap.module.scss'
import mapPin from './img/mapPin.png'

export default class Map extends Component {
  constructor(props) {
    super(props);
    this.state = {
      viewport: {
        width: '100%',
        height: '100%',
        latitude: 37.7577,
        longitude: -122.4376,
        zoom: 12
      },
      mapStyle: "streets-v9",
      style: 'mapbox://styles/mapbox/',
    };

    this.mapStyle_onChange = this.mapStyle_onChange.bind(this);
  }

  componentDidMount() {
    console.log("DIDMOUNT");
  }

  mapStyle_onChange(e) {
    this.setState({ mapStyle: e.currentTarget.value, latitude: 0, longitude: 0 });
  }

  render() {
    return (
      <div className={styles.parentMapContainer}>
        <div ref={el => this.mapContainer = el} className={styles.mapContainer}>
          <div className={styles.mapStyleRow}>
            <input type="radio" id="rdStreets" value="streets-v9" onChange={this.mapStyle_onChange} className={styles.mapStyleRadio} name="mapStyle" checked={this.state.mapStyle === "streets-v9"} />
            <div className={styles.mapStyleLabel}>Street</div>
            <input type="radio" id="rdSatellite" value="satellite-v9" onChange={this.mapStyle_onChange} className={styles.mapStyleRadio} name="mapStyle" checked={this.state.mapStyle === "satellite-v9"} /><div className={styles.mapStyleLabel}>Satellite</div>
          </div>
          <ReactMapGL
            mapStyle={this.state.style + this.state.mapStyle}
            mapboxApiAccessToken='pk.eyJ1INybW91bTJsbDF3dyJ9.vWoue-jEOJBbffqeMZDIEw'
            {...this.state.viewport}
            onViewportChange={(viewport) => this.setState({ viewport })}>
            <div style={{ position: 'absolute', right: 0 }}>
              <NavigationControl onViewportChange={(viewport) => this.setState({ viewport })} />
            </div>
          </ReactMapGL>
        </div>
      </div>
    );
  }
}