Invalid Hook Call Warning がなぜか直らない場合に考えられる原因

＊自分用のメモとして残しておきます。
　react-router-domをインストールしたのですがInvalid Hook Call Warning のエラーが出てしまい、解決するのにかなり時間がかかってしまったので解決方法を記述しておきます。もしかすると間違った解釈をしているかもしれませんが、その際にはコメントなどで教えていただけると幸いです。

https://ja.reactjs.org/warnings/invalid-hook-call-warning.html
公式のドキュメントにもある通り、原因は以下の3つが考えられます。
１React と React DOM のバージョンがマッチしていない。
２フックのルールに違反している。
３同じアプリ内に 2 つ以上の React のコピーが含まれている。

今回はこれらのルールに従っていてもInvalid Hook Call Warningのエラーが出てしまうときに考えられる原因を記述します。どうやらcreate-react-appをした際に使った際に使用したパッケージマネージャーと同じものを使用してライブラリを追加しないといけないようです。例として、

docker-compose run --rm front sh -c "yarn create react-app app --template typescript"

このようにyarnを使ってcreate-react-appした場合、react-router-domを追加する際に

docker-compose exec front npm install react-router-dom

このように記述すると、Vscode上では特にエラーは出ないのですが、ブラウザ上では

react.development.js:207 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

このようなエラーが出てしまう場合があります。正しくは

docker-compose exec front yarn add react-router-dom

このように記載することでエラーが消えて正常に動作するようになりました。