How to use file.json in react-google-maps with polygon path

Question

I have a file.json which contains too much data to fix.

For example:

"coordinates":[[[[97.3438072,18.5761446],[97.3439312,18.5695638],[97.3440129,18.5652256],[97.3449103,18.5526057],[97.3460132,18.551064],[97.3462187,18.5461024],[97.3471493,18.5444575],[97.3505654,18.5420087],[97.35223,18.5384576],[97.35223,18.5372728]................. 

I need to draw polygon from this file. My current progress is given below.

import React from 'react';
import { GoogleMap, withScriptjs, withGoogleMap, Polygon } from 'react-google-maps';
function Map() {
        <div>
           <GoogleMap
            defaultOptions={{
                streetViewControl: false,
                scaleControl: false,
                mapTypeControl: false,
                panControl: false,
                zoomControl: false,
                rotateControl: false,
                fullscreenControl: false
            }}
            defaultZoom={6}
            defaultCenter={{ lat: 14.570032, lng: 106.992538 }}>
            <Polygon
                path={[{ lat: [file.json?], lng: [file.json?] }]}
                options={{
                    strokeColor: "#ff2527",
                }}
            />
        </div>
    }

Answer 1

Given the format of file.json file (coordinates represents MultiPolygon geometry), it could be imported like this

import data from "./file";

and then Polygon initialized like this:

<Polygon
   path={data.coordinates}
/>

Example

import data from "./file";

function Map(props) {
  const { zoom, center } = props;

  return (
    <GoogleMap defaultZoom={zoom} defaultCenter={center}>
      <Polygon
        path={data.coordinates}
        editable={true}
        options={{
          strokeColor: "#FF0000",
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: "#FF0000",
          fillOpacity: 0.35,
          polygonKey: 1
        }}
      />
    </GoogleMap>
  );
}