this is the component that is not working

map.js

import { featureCollection, center, point, polygon } from '@turf/turf'
import React, { useCallback, useEffect, useState } from 'react'
import MapGL, { NavigationControl } from 'react-map-gl'
import { defaultMapStyle, dataLayer } from '../map-style.js'
import { fromJS } from 'immutable'
import { useMappedState } from 'redux-react-hook'
const MAPBOX_TOKEN = "xxxx"

const navStyle = {
  position: 'absolute',
  top: 0,
  left: 0,
  padding: '10px'
}

export default function Map() {
  const [viewport, setViewport] = useState({
    latitude: 32.739288,
    longitude: -97.567164,
    zoom: 8,
    bearing: 0,
    pitch: 0
  })

  const [mapStyle, setMapStyle] = useState(defaultMapStyle)

  const mapState = useCallback(
    state => ({
      records: state.records
    })
  )
  const { records } = useMappedState(mapState)

  const [data, setData] = useState(records)
  const updateViewport = useCallback(viewport => !console.log('updateViewport') && setViewport(viewport))

  useEffect(() => {
    if (records) {
      const geojson = fromJS({ type: 'geojson', data: records })
      const updatedMapStyle = mapStyle
        .setIn(['sources', 'records'], geojson)
        .set('layers', defaultMapStyle.get('layers').push(dataLayer))
      const [latitude, longitude] = center(
        polygon(records.features[0].geometry.coordinates)
      ).geometry.coordinates
      setViewport({ ...viewport, latitude, longitude, zoom: 8 })
      setMapStyle(updatedMapStyle)
      setData(geojson)
    }
  }, [records])

  function mapLoadHandler(event) {
    window.map = event.target

    map.on('sourcedata', event => {
    })
  }

  return (
    <MapGL
      {...viewport}
      width="100%"
      height="100%"
      draggable
      mapStyle={mapStyle}
      onLoad={mapLoadHandler}
      onViewportChange={updateViewport}
      mapboxApiAccessToken={MAPBOX_TOKEN}>
      <div className="nav" style={navStyle}>
        <NavigationControl onViewportChange={updateViewport} />
      </div>
    </MapGL>
  )
}