Having issue using FlyToInterpolar API in deckGL

Hi there,

I am new in reactjs and deckGL, I having a problem when using FlyToInterpolar API in deckGL. I have no issue loading the map in deckGL, but when i apply the FlyToInterpolar API in onClick button, I received an error which is:

error:

Error: failed to invert matrix
▶ 3 stack frames were collapsed.
Mapbox._updateMapViewport
src/mapbox/mapbox.js:434
  431 |   newViewState.altitude !== oldViewState.altitude;
  432 | 
  433 | if (viewportChanged) {
> 434 |   this._map.jumpTo(this._viewStateToMapboxProps(newViewState));
      | ^  435 | 
  436 |   // TODO - jumpTo doesn't handle altitude
  437 |   if (newViewState.altitude !== oldViewState.altitude) {
View compiled
Mapbox._update
src/mapbox/mapbox.js:400
  397 | newProps = Object.assign({}, this.props, newProps);
  398 | checkPropTypes(newProps, 'Mapbox');
  399 | 
> 400 | const viewportChanged = this._updateMapViewport(oldProps, newProps);
      | ^  401 | const sizeChanged = this._updateMapSize(oldProps, newProps);
  402 | 
  403 | if (!newProps.asyncRender && (viewportChanged || sizeChanged)) {
View compiled

The reason why i use marker from react-map-gl is because i would like to add a layer (scatterplot) from deckGL and have a circle radius on the marker. below is the code:

p/s: my apologies english is not my main language.

import React, {useState,forwardRef, useImperativeHandle} from 'react';
import MapGL, { Popup, Marker, StaticMap } from 'react-map-gl';
import DeckGL, { FlyToInterpolator } from 'deck.gl';
import * as d3 from 'd3-ease';
import { makeStyles } from "@material-ui/core/styles";

import ApiSigfox from '../Api/ApiSigfox'

const MAPBOX_TOKEN =  // Set your mapbox token here
const useStyles = makeStyles({
    box: {
    borderStyle: "solid",
    position: "absolute",
    top: 0,
    right: 0,
    left: 0,
    bottom: 0,
    zIndex: -1
    },
  })

const MapHooks = forwardRef((props, ref) => {
    const [fleetDetail, setFleetDetail] = useState(null)
    const [mapRef, setMapRef] = useState(null);
    const classes = useStyles()
    const sigfox = ApiSigfox()

    const [mapping, setMapping] = useState({
        width: '100%',
        height: '100%',
        longitude: -73.989308,
        latitude: 40.741895,
        zoom: 12
      });

    useImperativeHandle(ref, () => ({ 
        _goToNYC(e) {        
            Object.values(sigfox).map((docs) => {
                return (e === docs.device) ? (
                    updateMap(docs)
                ) : null
            })        
        }
    }));    

    //update Map
    function updateMap(test){
        console.log(test.device + '-' + 'updateMap')
        const viewport = {
            ...mapping,
            longitude: test.lon,
            latitude: test.lat,
            zoom: 14,
            transitionDuration: 2000,
            transitionInterpolator: new FlyToInterpolator(),
            transitionEasing: d3.easeCubic
        };
        setMapping(viewport)
        console.log(mapping)
    }

    return (
        <div className={classes.box} style={{borderStyle: "solid"}}>
            <DeckGL viewState={mapping} controller={true} onViewStateChange={setMapping}>
                <StaticMap             
                mapStyle="mapbox://styles/mapbox/streets-v11"
                mapboxApiAccessToken={MAPBOX_TOKEN}
                >                              
                    {Object.values(sigfox).map((docs) => {
                        return (docs.status !== 255 && (docs.lat >= -90 && docs.lat <= 90) ) ? 
                        <Marker 
                            key={docs.id} 
                            latitude={docs.lat} 
                            longitude={docs.lon} 
                            offsetTop={-35}
                            offsetLeft={-8}
                        >                           
                            <div>  
                                <button onClick={e => {e.preventDefault(); setFleetDetail(docs)}}>{docs.device}</button> 
                            </div>                       
                        </Marker>
                    : null
                    })} 
                    {/* display the pop up detail when click the icon */}
                    {fleetDetail ? (
                    <Popup
                    latitude={fleetDetail.lat}
                    longitude={fleetDetail.lon}
                    onClose={()=>{
                        setFleetDetail(null)
                    }}          
                    >
                    <div> 
                        <p>Device:{fleetDetail.device}</p>          
                        <p>Latitude:{fleetDetail.lat}</p>
                        <p>Longitude:{fleetDetail.lon}</p>
                        <p>status:{fleetDetail.status}</p>
                    </div>
                    </Popup>
                    ): null}               
                </StaticMap>
            </DeckGL>           
        </div>
    );
})

export default MapHooks

thank you very much

visgl / deck.gl

Having issue using FlyToInterpolar API in deckGL #4291