google maps أريد عندما اضغط على اى مكان فى الخريطة فان ال marker يذهب ويقف عليها .. كيف افعل هذا

انا استطيع فتح الخريطة ووضع الماركر عليها ولكنى الان اريد ان احرك الماركر واضعه فى المكان الذى قمت بالضغط عليه فى الخريطة .. كيف افعل ذلك ؟؟

هذا هو الكود

import React from 'react';
import {StyleSheet, View, Text, Image, Button} from 'react-native';
import MapView, {Callout, Marker} from 'react-native-maps';

const BasicMapViewEX = () => {
  const region = {
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.015,
    longitudeDelta: 0.0121,
  };

  const [Location, setLocation] = React.useState(region);
  const [MarkerLocation, setMarkerLocation] = React.useState(region);

  function handleRegionChange(region) {
    setLocation(region);
    setMarkerLocation(region);
  }

  return (
    <View>
      <MapView
        onRegionChangeComplete={handleRegionChange}
        initialRegion={region}
        style={styles.map}
        region={Location}>
        <Marker
          coordinate={MarkerLocation}
          image={require('./map_marker.png')}
          style={styles.image}
          // title="my location"
          // description="here am i"
        >
          <Callout tooltip>
            <View>
              <View style={styles.bubble}>
                <Text style={styles.name}>"my location"</Text>
                <Text style={styles}>Desc</Text>
                <Image
                  style={styles.image}
                  height={120}
                  width={80}
                  source={require('./map_marker.png')}
                />
              </View>
              <View style={styles.arrowBorder} />
              <View style={styles.arrow} />
            </View>
          </Callout>
        </Marker>
      </MapView>
    </View>
  );
};

const styles = StyleSheet.create({
  map: {
    height: '100%',
  },
  bubble: {
    flexDirection: 'column',
    alignSelf: 'flex-start',
    backgroundColor: '#fff',
    borderRadius: 6,
    borderColor: '#ccc',
    borderWidth: 0.5,
    padding: 15,
    width: 150,
  },
  arrow: {
    backgroundColor: 'transparent',
    borderColor: 'transparent',
    borderTopColor: '#fff',
    borderWidth: 16,
    alignSelf: 'center',
    marginTop: -32,
  },
  arrowBorder: {
    backgroundColor: 'transparent',
    borderColor: 'transparent',
    borderTopColor: '#007a87',
    borderWidth: 16,
    alignSelf: 'center',
    marginTop: -0.5,
  },
  name: {
    fontSize: 16,
    marginBottom: 5,
  },
  image: {
    width: 120,
    height: 80,
    backgroundColor: 'red',
  },
});
export default BasicMapViewEX;