I have a geojson mapbox tileset visualized on a map. I am currently able to draw shapes such as polygons,polylines and add points to the map. But I now want to limit the draw tool to only allow drawing within the boundaries of the geojson layer. How would I do this? What I currently has, lets the cursor change to a pan symbol when it's outside of the map, and to a crosshair symbol when inside the map.

But once I click the draw tool buttons, it overrides this and lets the user draw anywhere they want.

mapboxgl.accessToken = config.MAPBOX_PUBLIC;
const map = new mapboxgl.Map({
  attributionControl: false,
  container: "map", // container ID
  style: "mapbox://styles/mapbox/outdoors-v10", 
  center: [-69.45, 45.07], // starting position [lng, lat]
  zoom: 8, // starting zoom
});

export function makeClickableArea() {
  map.on("load", () => {
map.addSource('maine', {
'type': 'geojson',
'data': {
'type': 'Feature',
'geometry': {
'type': 'Polygon',
// These coordinates outline Maine.
'coordinates': [
[
[-67.13734, 45.13745],
[-66.96466, 44.8097],
[-68.03252, 44.3252],
[-69.06, 43.98],
[-70.11617, 43.68405],
[-70.64573, 43.09008],
[-70.75102, 43.08003],
[-70.79761, 43.21973],
[-70.98176, 43.36789],
[-70.94416, 43.46633],
[-71.08482, 45.30524],
[-70.66002, 45.46022],
[-70.30495, 45.91479],
[-70.00014, 46.69317],
[-69.23708, 47.44777],
[-68.90478, 47.18479],
[-68.2343, 47.35462],
[-67.79035, 47.06624],
[-67.79141, 45.70258],
[-67.13734, 45.13745]
]
]
}
}
});
 
// Add a new layer to visualize the polygon.
map.addLayer({
'id': 'maine',
'type': 'fill',
'source': 'maine', // reference the data source
'layout': {},
'paint': {
'fill-color': '#0080ff', // blue color fill
'fill-opacity': 0.5
}
});
// Add a black outline around the polygon.
map.addLayer({
'id': 'outline',
'type': 'line',
'source': 'maine',
'layout': {},
'paint': {
'line-color': '#000',
'line-width': 3
}
});
});
  changeMouseSymbol();
}

// add the draw tool
function changeMouseSymbol() {
  const modes = MapboxDraw.modes;
  var draw = new MapboxDraw({
displayControlsDefault: false,
  // Select which mapbox-gl-draw control buttons to add to the map.
  controls: {
    point: true,
    line_string: true,
    polygon: true,
  },});
map.addControl(draw);

  map.on("mouseover", "maine", () => {
    map.getCanvas().style.cursor = "crosshair";
  });
map.on("mouseleave", "maine", () => {
    map.getCanvas().style.cursor = "";
  });
}