Leaflet : how Prevent user to drag to gray scale area?

I use Leaflet map and i have problem om map that when user reach the edge of map it show gray back ground

Like This

and i like to prevent user to reach here and being stopped when reach the edge…
is this CSS problem or i can fix it with leaflet plugin or function.
Note: I use orginal sample of LEAFLET JS.

here is the map tiles configuration :

 var map = L.map('map').setView([51.505, -0.09], 3);
    L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=bQviwia3GEIWmWxoXm52', {
        attribution: '<a href="https://www.sample.yohaa" target="_blank">&trade; Samad</a> <a href="https://www.google.com/" target="_blank">&copy; Samad street map</a>',
        zoom: 3,
        minZoom: 3,
        maxZoom: 17,
        zoomCntrol: false,
        noWrap: true,
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
    

    }).addTo(map);