[Bug] Using your own function to restrict the viewState doesn't restrict mapbox-gl's internal viewState

[peeke]

Description

I have a use case that requires me to use my own function to restrict the viewState, instead of just passing in maxBounds. This seems to work, but has an unexpected side effect: the viewState of react-map-gl is restricted and the map is displayed correctly, but it seems the internal viewState is not restricted. When you move out of bounds and keep dragging, dragging bag doesn't start at the position where the map is currently displayed at, but starts from the point you would have ended up, had you not restricted the viewState at all.

I have currently worked around this by passing the maps onMoveEnd prop this function:

function handleMapMoveBugWithHack(e) {
  if (e.ignore) return
  e.target.setCenter([viewState.longitude, viewState.latitude], { ignore: true })
  e.target.setZoom(viewState.zoom, { ignore: true })
}

Expected Behavior

I would expect the internal mapbox viewState to match react-map-gl's. Dragging the map out of bounds, releasing it then trying to move it again should move the map immediately.

Steps to Reproduce

https://codesandbox.io/s/react-map-gl-bug-nvk491?file=/src/App.js

• Move the map to the left until your viewState is restricted.
• Move the map to the left some more (nothing will happen visually)
• Now move the map to the right.

You'll notice it doesn't move immediately, you first have to drag the map back to the point where the viewState was first restricted.

Environment

• Framework version: 7.0.10
• Map library: mapbox-gl
• Browser: Chrome 99.0.4844.83
• OS: macOS Big Sur 11.3

Logs

No response