(google-maps-реагировать) Всплывающий всплывающий элемент Material-UI не будет следовать за маркером карты, когда карта центрируется на маркере (LatLng)

Question

Я строю карту с маркерами карты, которые показывают всплывающую подсказку, созданную с помощью компонента Material-UI Popover. Мой код центрирует маркер при щелчке, но всплывающая подсказка / всплывающее окно остаются в том месте, где маркер карты находился до того, как был отцентрирован.

Вот изображение всплывающей подсказки / всплывающего окна, когда маркер карты отцентрирован:

Я уже пробовал позиционировать всплывающее окно / всплывающее окно детали как таковое:

.popover { 
   position: element(#map-marker);
   transform: translateY(-100%);
}

Но он все еще ведет себя так же. Я думаю, что компонент поповер не может рассчитать изменение положения маркера карты, потому что изменение продиктовано значениями широты / долготы для центра карты. Я просто не могу придумать способ обойти это.

Вот полный код:

Map.js

class ShowsMap extends Component {
  constructor(props) {
    super(props);

    this.state = {
      detailBubbleAnchorEl: null   // The currently selected marker that the popover anchors to
    }
  }

  handleDetailClose = () => {
    this.setState({
      detailBubbleAnchorEl: null
    })
  }

  handleMarkerClick = (event, lat, lng) => {
    this.setState({
      detailBubbleAnchorEl: event.currentTarget
    })
    // Set center coordinates of map to be those of the map marker (redux action)
    this.props.setSearchCenter({ lat, lng })
  }

 renderMap = () => {
    const { detailBubbleAnchorEl } = this.state;
    const detailOpen = Boolean(detailBubbleAnchorEl);
    const { viewport } = this.props.searchLocation;
    const { zoom } = fitBounds(viewport, { width: 400, height: 600})
    return (
      <GoogleMapReact
        yesIWantToUseGoogleMapApiInternals
        bootstrapURLKeys={{ key: MYAPIKEY }}
        defaultCenter={this.props.center}
        defaultZoom={this.props.zoom}
        zoom={zoom + 1}
        center={this.props.searchLocation.center}
        onGoogleApiLoaded={({ map, maps }) => this.handleApiLoaded(map, maps)}
      >
        {
          showLocations.map((location, index) => {
            const { lat, lng } = location;
            return (
              <div lat={lat} lng={lng} key={index}>
                <MapMarker onClick={(event) => this.handleMarkerClick(event, lat, lng)}  />
                <DetailBubble 
                  id="event"
                  open={detailOpen}
                  anchorEl={detailBubbleAnchorEl}
                  onClose={this.handleDetailClose}
                />
              </div>
            )
          })
        }
      </GoogleMapReact>   
    )
  }

  render() {
    return (
      <div ref={map => this.map = map} style={{ width: '100%', height: '100%',}}>
        {this.renderMap()}
      </div>
    );
  }

DetailBubble.js

const DetailBubble = ({ classes, open, anchorEl, onClose, id }) => {
    return(
        <Popover 
            id={id}
            classes={{ paper: classes.container}}
            open={open}
            anchorEl={anchorEl}
            onClose={onClose}
            anchorOrigin={{
                vertical: 'top',
                horizontal: 'center'
            }}
            transformOrigin={{
                vertical: 'bottom',
                horizontal: 'center'
            }}
        >
        </Popover>
    )
}

const styles = theme => ({
    container: {
        position: 'absolute',
        left: 0,
        top: 0, 
        right: 0,
        bottom: 0,
        width: '200px',
        height: '150px'
    }
});

MapMarker.js

const styles = theme => ({
    markerContainer: {
        position: 'absolute',
        width: 35,
        height: 35,
        left: -35 / 2,
        top: -35 / 2,
    },
    marker: {
        fill: '#3f51b5',
        '&:hover': {
            fill: 'blue',
            cursor: 'pointer'
        }
    }
})

function MapMarker({ classes, onClick }) {

    return (
        <div className={classes.markerContainer}>
            <Marker onClick={onClick} className={classes.marker} width={30} height={30} /> 
        </div>
    )
}

Заранее спасибо за помощь!