Reactjs 对函数组件的MapboxGL渲染问题作出反应

我对编程和反应非常陌生。目前正在尝试将图层添加到MapboxGL地图，但我发现错误消息，它显示：

未定义“mapContainer”无未定义

我做错了什么

import React, {useEffect} from 'react';
import mapboxgl from 'mapbox-gl';
mapboxgl.accessToken = 'PUBLIC TOKEN'

 const getMap = () => {
return new mapboxgl.Map({
  container: mapContainer,
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [9, 47],
  zoom: 10
});



  const Map = () => {
    useEffect(() => {
      const map = getMap();

  map.on('move', () => {
    this.setState({
      lng: map.getCenter().lng.toFixed(4),
      lat: map.getCenter().lat.toFixed(4),
      zoom: map.getZoom().toFixed(0)
    });
  });

  map.on('load', () => {
    map.addLayer({
      id: 'streets',
      type: 'line',
      source: {
        type: 'geojson',
        data:
          'http://someWFSAPIdata=application/json'
      },
      layout: {
        'line-join': 'round',
        'line-cap': 'round'
      },
      paint: {
        'line-color': '#08363e',
        'line-width': 0.8
      }
    });
  });
}, []);

以及如下所示的渲染

 return (
    <div>
      <div ref={el => (this.mapContainer = el)} className='mapContainer' />
      <h1>Hello there geoReact</h1>
    </div>
  );

返回(
（this.mapContainer=el）}className='mapContainer'/>
你好，乔治反应
);

因为我使用的功能组件不再需要渲染，但我不确定它有什么问题

---

非常感谢

我发现这个解释对我的案例非常有帮助

---

请使用react地图框，您能更详细地描述一下吗？请：）@DennisVash？