如何在react原生mapbox GL中放置浮动按钮

import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';

componentDidMount() {
  mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
  const map = new mapboxgl.Map({
    container: this.mapContainer,
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [longitude, latitude],
    zoom: 12
  });

  // 在这里添加你的浮动按钮
}

render() {
  return (
    <div ref={el => this.mapContainer = el} className="mapContainer" />
  );
}

componentDidMount() {
  // ...

  const floatingButton = document.createElement('button');
  floatingButton.className = 'floatingButton';
  floatingButton.innerHTML = 'Button';

  floatingButton.addEventListener('click', () => {
    // 处理按钮点击事件
  });

  map.addControl(new mapboxgl.Marker(floatingButton), 'top-right');
}

.floatingButton {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  background-color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px;
  font-size: 14px;
  cursor: pointer;
}