Inserting JavaScript giving errors in GoogleMaps

Question

I have two json arrays with which I am trying to produce Markers on a Map.

I'm getting the error:

Attempted import error: 'find' is not exported from './data/geoData.json' (imported as 'geoData').

while trying to find the zip in the geoData array within the JS for the position...

As noted, the console.log() returns the correct value.

import React from 'react';
import { GoogleMap, withScriptjs, withGoogleMap, Marker} from 'react-google-maps';
import styles from 'styled-components';
import * as zips from "./data/zips.json";
import * as geoData from "./data/geoData.json";

function googleMap () {
  return (
    <GoogleMap
      defaultZoom={5.0}
      defaultCenter={{lat: 38.5, lng: -98.5556}}
    >
      { zips['zipCodes'].map(zip => {
        console.log(geoData.find(elm => elm.fields.zip === zip['Recipient_Postal_Code']).fields.latitude); // I get the number
        console.log(typeof geoData);
        console.log(typeof geoData[0].fields);
        console.log(typeof geoData[0].fields.latitude);
        <Marker
          key = {zip['Shipment_Tracking_Number']}
          position = {{
            lat: geoData.find(elm => elm.fields.zip === zip['Recipient_Postal_Code']).fields.latitude,
            lng: geoData.find(elm => elm.fields.zip === zip['Recipient_Postal_Code']).fields.longitude
          }} />
      })}
    </GoogleMap>
  )
}

Console output:

34.197737 object object number