What is the best way to use strict bounds?

[miltonarce]

What is the best way to use strict bounds here? Limiting my bounds to USA for example.

I can see google maps is suggesting this:
function initMap() { map = new google.maps.Map(document.getElementById("map"), { center: AUCKLAND, restriction: { latLngBounds: NEW_ZEALAND_BOUNDS, strictBounds: false, }, zoom: 7, }); }

But I can't understand how to replicate here.

[miltonarce]

Fortunatly, I found how to do it, but I'm not pretty sure if it's okay.

import { useEffect } from "react";
import { Map, useMap } from "@vis.gl/react-google-maps";

import BaseMapsConfig from "./BaseMapsConfig";

function MainMap() {
  const map = useMap();

  useEffect(() => {
    if (!map) return;
    map.setOptions({
      restriction: {
        latLngBounds: BaseMapsConfig.MainMap.defaultBounds,
        strictBounds: false,
      },
    });
  }, [map]);

  return <Map {...BaseMapsConfig.MainMap} />;
}

export default MainMap;

[mrMetalWood]

You could also pass the restriction property directly to the map without the useEffect.

<Map 
    {...BaseMapsConfig.MainMap} 
    restriction: {
        latLngBounds: BaseMapsConfig.MainMap.defaultBounds,
        strictBounds: false,
    }
 />

or you can add the restriction object to your initial BaseMapsConfig.MainMap config.