Heatmap issue, 'h[m.x] is undefined'

[jamescaleca]

trafficstars

Hello,

Putting together an app as part of a final school project. I'm on the last part of it, and have been following the documentation for the correct syntax. The map itself will load properly, as well as the markers, but when attempting to load the heatmap layer, it breaks the app and returns an error that says: 'h[m.x] is undefined'. Here is the component <GoogleMapReact defaultZoom={8} defaultCenter={{ lat: diffStateCoords[0].lat, lng: diffStateCoords[0].lng }} heatmapLibrary={true} heatmap={diffStateHeatMapData} bootstrapURLKeys={{ key: 'my-key-goes-here', libraries: ['visualization'] }} yesIWantToUseGoogleMapApiInternals > {diffStateCombinedData.map(county => ( <Marker key={county.name} lat={county.coordinates[1]} lng={county.coordinates[0]} text={county.county} countyName={county.name} state={county} percentVaxxed={county.percentVaxxed} /> ))} </GoogleMapReact>

The object for the diffStateHeatMapData looks like: {positions: diffStateMapData, options: { radius: 90, opacity: .5 }}

The positions for diffStateMapData are in an array, where each object has lat, lng, and weight properties.

Not really sure what I'm doing wrong here. Have tried what feels like everything, so I'm hoping y'all can shed some light on the issue. Thanks so much!