Mapping over an array of coordinates doesn't work when generating markers

[EladKarni]

I'm trying to dynamically set markers depending on fetch data from a backend.

This works:

return isLoaded ? (
    <GoogleMap
        mapContainerStyle={containerStyle}
        center={center}
        zoom={12}
        onLoad={onLoad}
        onUnmount={onUnmount}
    >
       <Marker position={{lat: xx.xxx, lng: -xx.xxx }}/>
    </GoogleMap>
) : <></>

This doesn't:

return isLoaded ? (
    <GoogleMap
        mapContainerStyle={containerStyle}
        center={center}
        zoom={12}
        onLoad={onLoad}
        onUnmount={onUnmount}
    >
        <>
            {propertiesLocations && propertiesLocations.map(
                (address: Address) => <Marker position={{lat: xx.xx, lng: -xx.xxx }}/>
            )}
        </>
    </GoogleMap>
) : <></>

No errors or warnings in the console are showing up. I'm using NextJS 13 with "use client" to force a client side render.

[JustFly1984]

@EladKarni I have never tested it with nextjs, though there is gatsbyjs example in packages in repo.
recommended way is to log what you have, typeof, and use ternary with null instead of &&

Please provide minimal reproduction in codesandbox.io

PS: are you sure that array is not empty?