Map loses WebGL context when setting data state in useEffect promise

[atomtay]

Layer components (such as MAPCMunicipality) need data in array form in order to correctly create the choropleth. Our usual way of doing this in React is as follows:

 const [data, setData] = useState();
  useEffect(() => {
    setData("!")
    d3.csv('/assets/some-file.csv')
      .then((response) => {
        setData(data);
      })
  }, []);

Where data is then passed to the layer. However, this causes the map to disappear and the following error to appear in the console (browser agnostic): WebGL context was lost (mapbox-gl.js 35). This doesn't occur when console.loging the response from .then, and it also doesn't occur when setting state outside the call to d3.csv (but inside useEffect).