Tengo un archivo map.jsx en mi aplicación de reacción que contiene el siguiente código:

 import React from 'react'; import GoogleMapReact from 'google-map-react'; import './map.css'; const Map = ({ location, zoomLevel }) => ( <div className='map'> <div className='google-map'> <GoogleMapReact bootstrapURLKeys={{ key: 'keyID' }} defaultCenter={location} defaultZoom={zoomLevel}></GoogleMapReact> </div> </div> ); export default Map;

Luego, se llama a este componente desde el archivo de mi página principal 'chatApp.jsx' para mostrar el mapa en la pantalla:

 import React, { useEffect, useRef, useState } from 'react'; import { useParams } from 'react-router-dom'; import MapSection from '../components/map/Map'; const location = { address: 'House', lat: 53.123, lng: -2.123, }; export const ChatPage = () => { return ( <main className='chat-wrapper'> <MapSection location={location} zoomLevel={18} /> {/* include it here */} </main> ); };

Mi pregunta es: ¿Cómo puedo evitar que el mapa se pueda arrastrar/desplazar y mover? Lo quiero colocado constantemente en un lugar, con la imagen encima. ¿Hay alguna manera de introducir límites en este código?