How do I display markers on click and get coordinates using React Google Maps API

So I have a very simple react app that is using the google maps API in react and trying to display a marker when a user clicks on any point on a map.

import React, { Component } from "react";
import {Map, Marker, GoogleApiWrapper} from 'google-maps-react'

class MapContainer extends Component {
  mapClicked(mapProps, map, clickEvent) {
    return(
      <Marker postition={{ lat: mapProps.lat, lng: mapProps.lng}}
                name={'Current location'} />
    );
    
  }

  render() {
    return(
      <Map google = {this.props.google}
        onClick={this.mapClicked}

        style = {{width:"100%", height:"100%"}}
        zoom = {10}
        initialCenter = {
          {
            lat: 37.663626,
            lng: -122.106001
          }
        }
      >
        <Marker
            name={'Current location'} />
      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: 'HIDDEN'
})(MapContainer)

I see a marker right now at the position i specified in initial center. What I'm trying to do is be able to display a marker and get its coordinates when a user clicks on a map

i have the mapClicked function but am very confused on how to get it to display a marker and get me cooridnates

mapClicked(mapProps, map, clickEvent) {
    return(
      <Marker postition={{ lat: mapProps.lat, lng: mapProps.lng}}
                name={'Current location'} />
    );
    
  }