React google maps api marker at current location

Question

I want to add a marker to the coordinates when the user clicks the Get Coordinates button. I am using react with the react-with-google api. I been searching out ways to implement this but don't know what I'm missing.

I tried doing it like this:

    <GoogleMapReact
          bootstrapURLKeys={{ key: "API_KEY"}}
          center={this.state.center}
          zoom={this.state.zoom}
   >  <Marker>position: {{lat: this.state.latitude, lng: this.state.longitude}} </Marker>
   </GoogleMapReact>

but keep getting error code Attempted import error: 'Marker' is not exported from 'google-map-react'. I've attached the full code below without the Marker element.

import React,{useEffect}  from  'react';
    import './App.css';
    import GoogleMapReact, {GoogleMap, Marker, GoogleApiWrapper} from 'google-map-react';
    import {Button,Snackbar} from '@material-ui/core'
    class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          latitude: null,
          longitude: null,
         zoom: 1,
         center: {lat:10,lng:10},
         snackMessage: "Copied",
         open: false
        };
      this.getLocation = this.getLocation.bind(this);
      this.getCoordinates = this.getCoordinates.bind(this);
      this.copyCoordinates = this.copyCoordinates.bind(this);
      
      }
      
      getLocation() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(this.getCoordinates, this.handleLocationError);
        } else {
          alert("GeoLocation not supported");
        }
        console.log(this.state.center);
      }
      
      getCoordinates (position){
      this.setState({
        latitude: position.coords.latitude,
        longitude: position.coords.longitude,
        center: {lat: position.coords.latitude, lng: position.coords.longitude},
        zoom: 10
      })
      }
    
      handleLocationError(error) {
        switch(error.code) {
          case error.PERMISSION_DENIED:
            alert( "User denied the request for Geolocation.")
            break;
          case error.POSITION_UNAVAILABLE:
            alert( "Location information is unavailable.")
            break;
          case error.TIMEOUT:
            alert( "The request to get user location timed out.")
            break;
          case error.UNKNOWN_ERROR:
            alert( "An unknown error occurred.")
            break;
        }
      }
    
      copyCoordinates() {
        this.setState(state => ({message: "(" + this.state.latitude + ", " + this.state.longitude + ")"  +" Copied", open:true}))
        navigator.clipboard.writeText("(" + this.state.latitude + ", " + this.state.longitude + ")")
      }
    
        render() {
     
          return (
          <div className="App">
            
          <GoogleMapReact
              bootstrapURLKeys={{ key: "mykey"}}
              center={this.state.center}
              zoom={this.state.zoom}
       >  
       </GoogleMapReact>
           <p>Latitude: {this.state.latitude}</p>
           <p>Longitude: {this.state.longitude}</p>
           <Button variant="outlined" onClick = {this.getLocation}>Get coordinates</Button>
           <Button variant="outlined" onClick = {this.copyCoordinates}>Copy coordinates</Button>
           <Snackbar 
             message={this.state.message}
             open={this.state.open} 
             autoHideDuration={6000} 
             onClose={()=> this.setState({ open: false})}>
          </Snackbar>
            </div>
        
          );
        }
      }
      
      export default App