setEditable: not a LatLng or LatLngLiteral: in property lat: not a number

[Michalk001]

I have problem with edit polygon. Polygon is render correctly, but when I edit polygon I get error

InvalidValueError: setEditable: not a LatLng or LatLngLiteral: in property lat: not a number
at Polygon (eval at ES6ProxyComponentFactory (webpack-internal:///./node_modules/react-hot-loader/dist/react-hot-loader.development.js), Polygon:14:7)
at div
at GoogleMap (eval at ES6ProxyComponentFactory (webpack-internal:///./node_modules/react-hot-loader/dist/react-hot-loader.development.js), GoogleMap:14:7)
at MapViewRaw (webpack-internal:///./src/components/zones/ZonesPage.js:267:30)

Libs version:

• react@17.0.2
• react-google-maps/api@2.19.3

Previous I used react-google-maps lib@9.4.5

I tried use a safari and opera GX but is same problem.

Code:

  
  const { isLoaded } = useJsApiLoader({
    googleMapsApiKey: config.GOOGLE_MAPS_API_KEY,
    libraries: ["drawing", "geometry"],
    // ...otherOptions
  })

  if(!isLoaded) return <div>Loading</div>
  const options = {
    zoomControlOptions: {
      position: google.maps.ControlPosition.RIGHT_CENTER // 'right-center' ,
      // ...otherOptions
    }
  }
  return(
    <GoogleMap
      options={options}
      mapContainerStyle={containerStyle}
      center={props.initialLocation}
      zoom={12}
    >
      <DrawingManager
        drawingMode={props.drawingMode === drawingModes.none
          ? null
          : (props.drawingMode === drawingModes.polygon ? 'polygon' : 'circle')}
        onPolygonComplete={props.onPolygonComplete}
        onCircleComplete={props.onCircleComplete}
        defaultDrawingMode={'polygon'}
        defaultOptions={{
          drawingControl: false,
          drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
              'polygon',
              'circle',
            ],
          },
          polygonOptions: {
            fillColor: '#FFB74D',
            zIndex: 3,
            fillOpacity: 0.3,
            strokeWeight: 2,
            clickable: true,
          },
          circleOptions: {
            fillColor: '#FFB74D',
            zIndex: 3,
            fillOpacity: 0.3,
            strokeWeight: 2,
            clickable: true,
          },
        }}
      />
      {
        props.zones.filter(zone => zone.areaType === ZoneAreaTypes.polygon).map(zone => {
          const parseZone = (zone.area.map(x => new google.maps.LatLng(parseFloat(x.lat),parseFloat(x.lng)).toJSON()));
          return (
            <Polygon
              key={zone.id}
              path={parseZone}
              options={{
                ...shapeOptions[zone.type],
              }}
              editable={props.editZoneAreaMode && props.selectedZone && zone.id === props.selectedZone.id}
              onClick={arg => props.editMarkerLocationMode ? props.onClick(arg) : props.onSelect(zone)}
            />)
        })
      }
    </GoogleMap>
  )
}```