Error message appears randomly when using FlyToInterpolator

[JonCognioDigital]

Hi there,

I keep getting a javascript error which crashes my website when you click on markers and it tries to center the marker you clicked using by flying there.

Here is the error

First thing which is weird. It doesn't happen every time you click a marker, most of the time it flies straight there smoothly, but I've tried to work out what conditions cause the crash and it appears to be random. It's not if you click markers too quickly, it's not a certain marker, it can be the first marker you click or the 10th. If you reload the page and click the same markers in the same order at the same speed it can happen at any time.

So, what am I doing?

const [viewport, setViewport] = useState<any>({
    latitude: search.params?.lat ? parseFloat(search.params.lat) : 51.60658,
    longitude: search.params?.long ? parseFloat(search.params.long) : 0.309489,
    zoom: 13
})

// Marker Clicked
const handleMarkerClicked = useCallback((propertyId: number) => {

    const selectedProperty: Property = search.results.filter(item => item.id === propertyId)[0]

    setSelectedPropertyId(propertyId)

    const newViewport = {
        longitude: selectedProperty.address_geolocation_longitude,
        latitude: selectedProperty.address_geolocation_latitude -0.005,
        zoom: viewportRef.current.zoom,
        transitionInterpolator: new FlyToInterpolator({speed: 1.2}),
        transitionDuration: '250'
    }

    setViewport(newViewport)

}, [search.results,])

And in my page I use the map like this..

<ReactMapGL
    width="auto"
    height="auto"
    onViewportChange={(viewport) => handleViewportChanged(viewport)}
    mapboxApiAccessToken={config.mapbox.accessToken}
    attributionControl={false}
    pitch={30}
    mapStyle={config.mapbox.styles[search.meta.mapMode]}
    style={{position: 'absolute', top: 0, right: 0, left: 0, bottom: -30}}
    {...viewport}
    className="searchViewMap-map"
>
    <Markers />    
 </ReactMapGL>

So, from digging into the source code it seems like the ViewportFlyToInterpolator function is not being called with a required prop "width", but this is all internal and seems to be out of my control so reporting it as a bug.

Has this been seen before and is there a way for me to fix it other than disabling the FlyToInterpolator?

[JonCognioDigital]

OK, so I think I found the problem. I was making 2 updates in very quick succession. Effectively asking it to FlyTo then immediately asking it to FlyTo somewhere else because my react functions were reacting to the change then firing another one immediately.