I have a map.jsx file in my react app which contains the following code:

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;

This component is then called from my main page file 'chatApp.jsx' in order to display the map on screen:

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>
    );
};

My question is: How can i stop the map from being able to be dragged/scrolled and moved around? I want it constantly set on one place, with the image over the top of it. Is there a way to introduce bounds into this code?