为什么我在mapboxgl React上得到的是空白页面

我正在使用React建立一个地图组件，考虑到我按照Mapbox团队的例子在这里和这里进行了设置，看起来不错。

但是当组件安装时，我得到了一个空白页，我在这里和这里看到了一系列类似的问题，似乎都没有解决我的问题。

请看我的代码样本

import mapboxgl from '!mapbox-gl'; // eslint-disable-line import/no-webpack-loader-syntax
import { Box } from '@mui/system';

import { useEffect, useRef, useState } from 'react';

import { useDispatch, useSelector } from 'react-redux';
import '../components/propertyMap.css';

const PropertyMap = () => {
  const mapContainer = useRef(null);
  const map = useRef(null);
  const dispatch = useDispatch();
     
  const [property_id, setProperty_id] = useState('');

  const onChange = (e) => {
    setProperty_id(e.target.value);
  };

  mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_TOKEN;
  useEffect(() => {
    if (!mapboxgl.supported()) {
      alert('Your browser does not support Mapbox GL');
    }
    if (map.current) return;
    map.current = new mapboxgl.Map({
      container: mapContainer.current,
      style: 'mapbox styles here',
      center: [6.459964, 7.548949],
      zoom: 14,
      attributionControl: true,
      interactive: true,
      customAttribution: '&copy',
      boxZoom: true,
    });

    map.current.setCenter([6.459964, 7.548949]);

    // mapboxgl.boxZoomCursor = 'grab';
    map.current.boxZoom.enable();
    map.current.addControl(
      new mapboxgl.NavigationControl(),
      'top-right'
    );
    map.current.addControl(
      new mapboxgl.AttributionControl({ compact: true })
    );
    map.current.resize();
    return () => map.current.remove();
  }, [property]);

  return (
      <Box>
        <Box ref={mapContainer} className='mapContainer' />
      </Box>
  );
};

export default PropertyMap;