title: ReactJS Mapbox-gl Invalid type: 'container' must be a String or HTMLElement
body: <p>I'm building a small App using ReactJS and Mapbox GL JS.</p>
  <pre><code>const MapRender = () =&gt; {
    const mapContainerRef = useRef(null);
    const map = new mapboxgl.Map({
      container: mapContainerRef.current,
      style: &quot;mapbox://styles/mapbox/streets-v11&quot;,
      center: [0, 0],
      zoom: 1
    });
    map();
  
    useEffect(()=&gt;{
    ..........//Code 
    },[]);
  
    return (
      &lt;div&gt;
        &lt;div className=&quot;map-container&quot; ref={mapContainerRef} /&gt;
      &lt;/div&gt;
    );
  };
  
  export default MapRender;
  </code></pre>
  <p>My code above basiclly display a map on a webpage. But I got the error messenge:</p>
  <pre><code>Invalid type: 'container' must be a String or HTMLElement.
  </code></pre>
  <p>Everythings will be fine if I put <code>const map = new mapboxgl.Map()</code> into <code>useEffect()</code> but it's mean eachtime when I <code>setState</code> the Map will call and reload again.</p>
  <p>I expect the use the same map during the whole runtime of my app.</p>
  <p>How can I do that ?</p>