【React】フロントエンドで選択した文字列の一部だけをバックエンドに渡して翻訳アプリを完成させたい

以下の質問についてご存知の方がいらっしゃいましたらご教示を願います

【質問の主旨】

現在、私はDeepL APIを使用した翻訳アプリを作成しています。
アプリの画面で翻訳元の言語名と言語コードを選択し文章を入力し矢印ボタンを押したときに、翻訳先の言語に翻訳された文章が表示されて完成とします。

ユーザーは「言語名（言語コード）」を選ぶという仕様になっていますが、DeepLの翻訳をする際に必要となるのは、言語名ではなく言語コードの方です。

フロントエンドのModal.jsとApp.jsでは「言語名（言語コード）」を選択する一方で、言語コードだけをバックエンドのserver.jsに渡して翻訳アプリを完成させるためには、App.jsやserver.jsをどのように書き換えれば良いでしょうか？

App.js の一部

const translate = async () => { const data = { textToTranslate, outputLanguage, inputLanguage } const response = await axios("http://localhost:8000/translation", { params: data, }); setTranslatedText(response.data); }

server.js の一部

app.get("/translation", async(req, res) => { const {textToTranslate, outputLanguage, inputLanguage } = req.query; const authKey = process.env.DEEPL_API_KEY; // Replace with your key const translator = new deepl.Translator(authKey); try { (async () => { const result = await translator.translateText(textToTranslate, inputLanguage, outputLanguage); console.log(result.text); res.status(200).json(result.text); })(); } catch(err) { console.log(err); res.status(500).json({message: err}); } });

【質問の補足】

1. コードと手順について

コードの詳細についてはそれぞれGitHubのリポジトリにまとめています

2. エラー画面

この手順の作業を終えたときにフロントエンド(localhost:3000)と、バックエンド(localhost:8000)のターミナルでそれぞれエラーが表示されます

フロントエンド

バックエンド

3. DeepL APIの翻訳機能について

DeepL APIで翻訳するためにdeepl-nodeのtranslate() を使用しています。その使用方法についてはこちらの公式ドキュメントを参考にしています。

こちらの記述で翻訳元(source)と翻訳先(target)の言語は言語名ではなく、言語コードで指定するよう説明されています

---

以上、ご確認をお願いします。