How to use the react-map-gl.FlyToInterpolator function in react-map-gl

try {
      if (!bboxExceptions[short_code] && bbox) {
        zoom = fitBounds([[bbox[0], bbox[1]], [bbox[2], bbox[3]]], { width, height }).zoom
      } else if (bboxExceptions[short_code]) {
        zoom = fitBounds(bboxExceptions[short_code].bbox, { width, height }).zoom
      }
    } catch (e) {
      console.warn('following result caused an error when trying to zoom to bbox: ', result) // eslint-disable-line
      zoom = this.geocoder.options.zoom
    }

    onViewportChange({
      longitude,
      latitude,
      zoom,
      transitionInterpolator: new FlyToInterpolator(),
      transitionDuration: 3000
    })
    onResult(event)

    this.cachedResult = result
    this.geocoder._typeahead.selected = null
    this.showClearIcon()
  }

// CUSTOM PROPS FROM REACT MAPBOX API
          {...mapboxProps}
          // VIEWPORT
          {...viewport}
          width="100%"
          height="100%"
          // INTERACTIVE
          dragPan={dragPan && !flying}
          dragRotate={dragRotate && !flying}
          touchRotate={touchRotate}
          // DEFAULT FUC IMPLEMENTATIONS
          onViewportChange={!flying ? this.onViewportChange : null}
          onResize={this.onResize}
          onLoad={this.onLoad}
          getCursor={getCursor}
          transitionInterpolator={new FlyToInterpolator()}
        >
          {loaded &&
            !!this.map &&
            typeof children === 'function' &&
            children(this.map)}
        
      
    );
  }
}

// centre the screen from the bounds
    const bound = webViewport.fitBounds(
      [[bounds._sw.lng, bounds._sw.lat], [bounds._ne.lng, bounds._ne.lat]],
      {
        padding: 0,
        offset: [0, 0],
      }
    );

    return {
      ...bound,
      latitude: coordinates.lat,
      longitude: coordinates.lon,
      transitionDuration: 1000,
      transitionInterpolator: new FlyToInterpolator(),
      transitionEasing: easeCubic,
    };
  },
};

import PropTypes from "prop-types";
import { FlyToInterpolator } from "react-map-gl";

const interpolator = new FlyToInterpolator();

// Selectors:
export const mapViewportSelector = state => state.mapAlt.viewport;
export const mapStyleSelector = state => state.mapAlt.style;
export const sourcesMetadataSelector = state => state.mapAlt.sourcesMetadata;
export const layerGroupsMetadataSelector = state =>
  state.mapAlt.layerGroupsMetadata;

// Actions:
const UPDATE_VIEWPORT = "map-alt/UPDATE_VIEWPORT";
const UPDATE_STYLE = "map-alt/UPDATE_STYLE";
const UPDATE_LAYER_GROUP_LOAD_STATUS = "map-alt/UPDATE_LAYER_GROUP_LOAD_STATUS";
const UPDATE_MAP_GEOJSON_SOURCE = "map-alt/UPDATE_MAP_GEOJSON_SOURCE";
const LOAD_STYLE_AND_METADATA = "map-alt/LOAD_STYLE_AND_METADATA";
const UPDATE_SOURCE_LOAD_STATUS = "map-alt/UPDATE_SOURCE_LOAD_STATUS";
const UPDATE_LAYER_GROUP_VISIBILITY = "map-alt/UPDATE_LAYER_GROUP_VISIBILITY";

// INTERACTIVE
          dragPan={!flying && dragPan}
          dragRotate={!flying && dragRotate}
          scrollZoom={!flying && scrollZoom}
          touchZoom={!flying && touchZoom}
          touchRotate={!flying && touchRotate}
          doubleClickZoom={!flying && doubleClickZoom}
          getCursor={getCursor}

          // DEFAULT FUC IMPLEMENTATIONS
          onViewportChange={this.onViewportChange}
          onResize={this.onResize}
          onLoad={this.onLoad}

          transitionInterpolator={new FlyToInterpolator()}
        >
          {loaded && !!this.map && typeof children === 'function' && children(this.map.current.getMap())}
        
      
    );
  }
}

_goToViewport = ({longitude, latitude}) => {
    this._onViewportChange({
      longitude,
      latitude,
      zoom: 11,
      transitionInterpolator: new FlyToInterpolator({speed: 2}),
      transitionDuration: 'auto'
    });
  };

UPDATE_VIEWPORT,
  SET_ZOOM_INCREMENT,
  SET_MOUSE_LAT_LONG,
  TRANSITION_END,
  SET_NATIVE_VIEWPORT
} from 'map/mapViewportActions';

import { FlyToInterpolator } from 'react-map-gl';
import { easeCubic } from 'd3-ease';
import { MIN_ZOOM_LEVEL, MAX_ZOOM_LEVEL } from 'config';
import { TRANSITION_TYPE } from 'constants';
import defaultWorkspace from 'workspace/workspace';

const DEFAULT_TRANSITION = {
  transitionDuration: 500,
  transitionInterpolator: new FlyToInterpolator(),
  transitionEasing: easeCubic
};

const initialState = {
  viewport: {
    latitude: defaultWorkspace.workspace.map.center[0],
    longitude: defaultWorkspace.workspace.map.center[1],
    zoom: defaultWorkspace.workspace.map.zoom - 1,
    bearing: 0,
    pitch: 0,
    width: 1000,
    height: 800
  },
  maxZoom: MAX_ZOOM_LEVEL,
  minZoom: MIN_ZOOM_LEVEL,
  prevZoom: 3,

const layersThunk = () => [
      match(locationDisplayType, [
        [LOCATION_DISPLAY_TYPE_DOTS, () => this.locationParser.getScatterplotLayer()],
        [LOCATION_DISPLAY_TYPE_PATH, () => this.locationParser.getLineLayer()],
        [LOCATION_DISPLAY_TYPE_HEATMAP, () => this.locationParser.getScreenGridLayer()],
      ])(),
    ].filter(Boolean);

    return (
      <div style="{{">
        
      </div>
    );
  }
}

const handleFlyTo = destination =>
    setViewState({
      ...viewState,
      ...destination,
      transitionDuration: 2000,
      transitionInterpolator: new FlyToInterpolator(),
    });

_goToViewport = ({ longitude, latitude }) => {
    this._onViewportChange({
      viewState: {
        longitude,
        latitude,
        zoom: 8,
        transitionInterpolator: new FlyToInterpolator({ speed: 2 }),
        transitionDuration: 2000
      }
    });
  };