function work just one time but not the second (i have to referesh the page)

I created two boxes with translator function, the first translates from native language (Italian) into a recovered language depending on the login on the application; the second from the language retrieved from the login on the application to Italian;
boxes looks like that;
the first box has id=#message, the second one id=#message_lang;

For do that I'm using the DeepL API.
The purpose is to use the first one box for write/get the text in italian.
The second box is for write in a others languages with the purpose to get the translated text (in italian) in the first box but also for get translated text from italian.

I used two arrows buttons where each of them has a function:
left arrow translate from language X to italian;
right arrow translate from italian to language X;

 btnTranslate_left.addEventListener("click", () => {
        let fromLang = getTargetLang(langToTranslate)
        let toLang = getTargetLang(1);
        translateHandler(fromLang, toLang, box_b, box_a);
    });

    btnTranslate_right.addEventListener("click", () => {
        let toLang = getTargetLang(langToTranslate)
        let fromLang = getTargetLang(1);
        translateHandler(fromLang, toLang, box_a, box_b);
    });

    const getTargetLang = (langToTranslate) => {
        return languageData[langToTranslate];
    }

    async function translateHandler(fromLang, toLang, inputSource, inputDestination) {
        const translatedText = await translate(inputSource.value, fromLang, toLang);
        inputDestination.innerText = translatedText;
    }

    async function translate(textToTranslate, fromLang, toLang) {
        const API_URL = `${ConfigJson.apiDeepLUrl}auth_key=${ConfigJson.apiDeepLKey}&text=${textToTranslate}&source_lang=${fromLang}&target_lang=${toLang}`;
        const response = await fetch(API_URL);
        const data = await response.json();
        return data.translations[0].text;
    };

getTargetLang
provide to convert the id lang into initial of language ex:
1=>"IT",
2=>"FR",
ets,ets

translate
it provide to translate the text given into a specific language(DeepL);

translateHandler
it handle the translate function response and if the response is in italian, that will be put inside the first box; otherwise the translated text will be putting inside the second box.

THE PROBLEM
the functions works every time from italian to X language but from X language to italian it works just one time but after I have to refresh the page.I have not error in the console. What it can be?

I tried to remove async/await but without success.
I don't understand what the problem can be.
thank you very much!

I solved the problem by changing the HTML elements of the boxes; the error was generated by the innerHTML or textContent method associated with the textarea or input; Such boxes do not have these methods/properties. By associating the .value to the boxes, the problem has been solved.
Thank you all for the advice!