typescript Could not find a declaration file for module '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions'

Hi,

I tried to install this package mapbox-gl-directions in my codebase, but I am facing below error. In the stackblitz its working in js file, even in our codebase its working fine in js file but not in tsx file. Even I chnaged ts config file and saw but not working. I tried installing types too. My local codebase is in yarn Can you let me know how to fix it.

https://stackblitz.com/edit/react-38evvg?file=src%2FApp.js




`import mapboxgl from 'mapbox-gl'
import { LegacyRef, MutableRefObject, useContext, useEffect, useRef, useState } from 'react'
import { styles } from './InvoicesMapViewStyles'
import { useInvoicesByStore } from '../../../../queries/Invoices/useInvoicesByStore'
import { RouteBuilderContext } from '../../RouteBuilder'
import { InvoicesResponse } from '../../../../utilities/services/DeliveryRouteService'
import { StoreContext } from '../../../../utilities/contexts/StoreContext'
import 'mapbox-gl/dist/mapbox-gl.css';
import MapboxDirections from '@mapbox/mapbox-gl-directions';
//import * as mapboxgldirections from 'mapbox-gl-directions';
//import from '@mapbox/mapbox-gl-directions/';
// import Directions from 'react-map-gl-directions'
`

`ERROR in src/screens/components/Navigation.tsx:9:30
TS7016: Could not find a declaration file for module '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions'. '/Users//Documents/web-may18-1-34pm/app/node_modules/@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/mapbox__mapbox-gl-directions` if it exists or add a new declaration (.d.ts) file containing `declare module '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions';`
     7 | import { StoreContext } from '../../../../utilities/contexts/StoreContext'
     8 | import 'mapbox-gl/dist/mapbox-gl.css';
>  9 | import MapboxDirections from '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions';
`
**tsconfig.json
**
`{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"types": ["mapbox/mapbox-gl-directions"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"]
}`