How to assign coordinates as props to Marker component for Google Maps, in React?

Question

I am using google-maps-API for my React project. I was able to create a marker on my google maps, with constant coordinates. But what I would like to do is, read the coordinates from a JSON file and pass them as props to my position attribute, in my marker component. I have imported the JSON file as Data and used map function to assign coordinates to my marker.

import { GoogleMap, Marker, useLoadScript } from "@react-google-maps/api"; import { useMemo } from "react"; import Data from './xxx.json';

var new1; export default function Maps(){ const { isLoaded } = useLoadScript({ googleMapsApiKey: 'xxxxxxxxxxxxxxx', }); const center = useMemo(() => ({ lat: 40.117862 , lng: -83.178291 }), []);

return ( {!isLoaded ? (

Loading...

) : ( { Data.map((item,id)=>( //console.log("lat: "+item['coordinatesX'],"lon: "+item['coordinatesY'])

new1= useMemo(() => (( lat: {item['coordinatesX']},lng:{item['coordinatesY']}))

          <Marker position={{ lat: {item[coordinatesX], lng: {item[coordinatesY]} }} ></Marker>

        ))


       </GoogleMap>
      )}
    </div>
  )

} This is error I have-

SyntaxError: X:\xxx\xxx\xxx\xxx\xxx\xxx.js: Unexpected token, expected "," (32:44)

30 | 31 | 32 | <Marker position={{ lat: {item[coordinatesX], lng: {item[coordinatesY]} }} > | ^ 33 | 34 | )) 35 | }

Line 32:44: Parsing error: Unexpected token, expected "," (32:44)

webpack compiled with 2 errors and 1 warning

I just need to know the appropriate syntax to render my markers dynamically with map function.