【React】MapBoxを使って地図アプリに「検索機能」追加

はじめに

Mapboxを使用して地図機能を持ったアプリを個人で開発しています。
地図アプリに検索機能を持たせようとしてつまづいところがあったので、解決までを簡単に記事として残しておこうと思います。

起きたこと

現時点の最新版react-map-gl v7(v7.0.19)を使用してマップアプリを作ると、react-map-gl-geocoderが使用できないようで検索機能の追加に苦戦してました。
コンポーネント内でreact-map-gl-geocoder(v2.2.0)をインポートして使用しようとすると下記のようなエラーが出ました。

Attempted import error: 'FlyToInterpolator' is not exported from 'react-map-gl' (imported as 'r').

同じエラーについて質問されている方もいらっしゃったので載せておきます。
・Attempted import error: 'FlyToInterpolator' when using mapBox
・react-map-gl 7 support #132
どうやらv7からはreact-map-gl-geocoderが機能しなくなっているようで@mapbox/mapbox-gl-geocoderを直接使って欲しいとのことです。
なので@mapbox/mapbox-gl-geocoderを直接使って検索機能を付与させる必要があります。

解決策

最終的に下記の記事を参考にしたら解決できました。
・【React】Mapboxを使用して検索機能付きの地図を表示してみる

備考

■解決するまでに試したこと
・react-map-glをv6にダウングレード・・・記録として残しておらずすみませんが、私の力では上手く行きませんでした

終わりに

終わってみればなんとも簡単に解決したのですが、個人的には結構苦戦してました。
解決できたのも単に参考にさせて頂いた記事を書いてくださったなかつがわさんや皆さんのおかげです。

最後まで、見ていただきありがとうございました。