You can use the maxBounds property of a map - docs here

To integrate with react-map-gl, it looks like you have to include this as part of the mapOptions object property, not as part of the viewport. As react-map-gl docs explain, the mapOptions prop of an InteractiveMap inherits from the StaticMap mapOptions prop. You might try this:

return (
  <ReactMapGL
    {...props}
    mapOptions={{
      maxBounds={[
        [-10.76418, 49.528423],
        [1.9134116, 61.331151],
      ]}
    }}
  />
);

You can use map.getBounds() or map.getBounds().toArray().

If you want to fit map to markers, you can create bounds that contains all markers.

var bounds = new mapboxgl.LngLatBounds();

markers.features.forEach(function(feature) {
    bounds.extend(feature.geometry.coordinates);
});

map.fitBounds(bounds);