谷歌地图通过点击显示有关标记的信息

谷歌地图上有一些标记，当用户点击地图上的任何一个标记时，它会显示标记信息。除了经度和纬度值外，标记还有一些信息，如“标题、描述……”。我不知道怎么做。请帮助我。

import React from 'react'
import GoogleMapReact from 'google-map-react'
import { Icon } from '@iconify/react'
import locationIcon from '@iconify/icons-mdi/map-marker'
import './map.css'

const showInfo = (text) => {
  console.log(text);
}

const LocationPin = ({ text }) => (
  <div className="pin">
    <button onClick={showInfo(text)}><Icon icon={locationIcon} className="pin-icon" /></button>
    <p className="pin-text">{text}</p>
  </div>
)


const Map = ({ locations, zoomLevel }) => {
  return (
    <div className="map">
      <div className="google-map">
        <GoogleMapReact
          bootstrapURLKeys={{ key: '' }}
          defaultCenter={locations[0]}
          defaultZoom={zoomLevel}
        >
          {
            locations.map(location => (
              <LocationPin
                lat={location.lat}
                lng={location.lng}
                text={location.address}
              />
            ))
          }
        </GoogleMapReact>
      </div>
    </div>
  )
}

export default Map


const locations = [
  {
    title: 'Atlanta GA',
    description: 'This is ...',
    address: 'Atlanta GA',
    lat: 33.753746,
    lng: -84.386330,
  },
  {
    title: 'Las Vegas',
    description: 'This is ...',
    address: 'Las Vegas',
    lat: 36.114647,
    lng: -115.172813,
  },
  {
    title: 'Los Angeles',
    description: 'This is ...',
    address: 'Los Angeles',
    lat: 34.052235,
    lng: -118.243683,
  }
];

https://www.iaconnection.com/