【JavaScript】Mapboxで「There is already a source with this ID」エラーが発生【未解決】

タイトルにも書いてありますが、未解決です。

先日からMapboxを触っているのですが、その中でナビゲーション機能を追加・削除したいと考えています。
で、追加して削除までは成功したのですが、その後もう一度追加しようとすると、「There is already a source with this ID」というエラーが発生している状況です。
Google翻訳に掛けたところ「このIDを持つソースが既に存在します。」とのことだったので、削除したコントローラのデータが一部残っているのではと思っております。

ちなみにエラーが発生しているソースコードはこちら。

var directions;
function navi() {
    if(['条件：ナビ機能が追加済みだったら']) {
        map.removeControl(directions);
        directions = null;
    } else {
        directions = new MapboxDirections({
                        accessToken: mapboxgl.accessToken
                    });
        map.addControl(directions, 'top-left');
    }
}

このコードを実行すると、1回目の追加と削除が成功した後、10行でエラーになります。

まだしっかりと読めてはいないのですが、下記の記事が同じ原因で発生しているように見えるので、時間をとってしっかり確認したいと思います。

layers don’t show up after removing them and adding them again・issue #5440・mapbox/mapbox-gl-js
https://github.com/mapbox/mapbox-gl-js/issues/5440

CSSでの単なる表示・非表示の切り替えも考えたのですが、検索窓が見えないだけで実行されてしまうので、結局この方法がベストかな、と考えています。
解決策が分かったら、また改めてご紹介したいと思います！