I created a simple map in the react project with the help of the leaflet library. Now I need to make the map be focused on one specific country so it won't be possible to scroll the map outside its borders.

So far, I have found solutions that apply only to a standard Java Script / HTML project and not something that integrates with the leaflet library for react.

Also, even these solutions only need to define an area where only the map is loaded and the other tiles are not loaded, and as can be understood from the description at the beginning of my question, This is not exactly what I need and I realized there is another option.

(However, if you are familiar with another option to make the map be focused on a specific country in some way, even if it doesn't exactly do what I described, feel free to list below. I'd be happy for any advice)

Anyone have an idea?

Here is my code:

import './App.css';
import { MapContainer, TileLayer} from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

function App() {
  return (
    <div>
       <MapContainer
        style={{ height: "400vh" }}
        center={[51.505, -0.09]}
        zoom={13}
        scrollWheelZoom={false}
      >
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
      </MapContainer>
    </div>
  );
}

export default App;