MapboxDirections was not found

@tristen @mapsam @willwhite @tmcw

I am using this package for a react app and the steps i have followed are:

npm install --save @mapbox/mapbox-gl-directions

then inside of my `App.js`

import MapboxDirections from "@mapbox/mapbox-gl-directions";

export default class MyMap extends Component{

componentDidMount(){
mapboxgl.accessToken = my token is placed here;
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/basic-v9',
zoom: 4,
center: [77.4126, 23.2599]
});
map.addControl(new mapboxgl.FullscreenControl());
map.addControl(new mapboxgl.GeolocateControl());
map.addControl(new MapboxGeocoder({accessToken:mapboxgl.accessToken}));
map.addControl(new mapboxgl.NavigationControl());
map.addControl(new MapboxDirections({accessToken: mapboxgl.accessToken}), 'top-left');
}

the error is as follows:

"export 'default' (imported as 'MapboxDirections') was not found in '@mapbox/mapbox-gl-
directions'

If you do something like this, even though it is a "default export"

import { MapboxDirections } from "@mapbox/mapbox-gl-directions";

the previous error gets fixed and a new error shows up about `Geocoder` or something else.

Start by reproducing the npm install and import shown in App.js, then inspect how the installed @mapbox/mapbox-gl-directions package is exported. Review the existing 22-comment thread before changing anything, and verify that the documented import works without the subsequent Geocoder or related errors.

Written by the indexing model from the issue text.