POST request returning old data ReactJS

Question

I am trying to recreate google translate, I have an api which sends data as expected, also returns data as expected the first time. After changing text and trying to translate it, it sends the changed text but returns old data from the first api request.

Here's the code:

const encodedParams = new URLSearchParams();
  const inputClick = (key) => {
    console.log("input key is: ", key)
    encodedParams.append("from", key)
  };

  const outputClick = (key) => {
    console.log("output key is: ", key)
    encodedParams.append("to", key)
  };

  const options = {
    method: "POST",
    headers: {
      "content-type": "application/x-www-form-urlencoded",
      "X-RapidAPI-Key": "b5fbbf02e6msh4aacdf98c2f1f11p1b2315jsn49f1072e8b3e",
      "X-RapidAPI-Host": "translo.p.rapidapi.com",
    },
    body: encodedParams,
  };

  const translate = () => {
    let inp = document.getElementById("input-txt").value;
    encodedParams.append("text", inp)
    console.log("input text: ", inp)

      fetch("https://translo.p.rapidapi.com/api/v3/translate", options)
        .then((response) => response.json())
        .then((response) => {
          console.log(response)
          console.log("translated text: ", response.translated_text)
        })
        .catch((err) => console.error(err))
  }

Here's the data it returns:

input key is language I am translating FROM (here it is bosnian),
output key is language I am translating TO (here it is english),
first input text is correct and should translate to "Greetings from Bosnia" which it does,
second input text is modified and correct which should translate to "Greetings from Croatia" which it does not translate to.

I am out of ideas.

EDIT

encodedparams is declared on start I just failed to copy it correctly

Here's extra code

Following code is for inputClick, this is where I choose one of the languages from dropdown menu, the languages.map is extracting array of available languages from other js file which I imported. the language.code is ISO 639-1 code for selected language:

<ul className="dropdown-menu">
                  {languages.map((language) => (
                    <li>
                      <button
                        className="dropdown-item"
                        type="button"
                        onClick={() => inputClick(language.code)}
                        key={language.code}
                      >
                        {language.name}
                      </button>
                    </li>
                  ))}
                </ul>

Following code is for input text, this is where I type text that I want to be translated which is obtained with getElementById:

<div className="input-txt layout">
              <textarea
                type="text"
                id="input-txt"
                placeholder="Unesite vaš tekst ovdje..."
              />
            </div>

Following code is outputClick, same explanation as inputClick just for output:

<ul className="dropdown-menu">
                  {languages.map((language) => (
                    <li>
                      <button
                        className="dropdown-item"
                        type="button"
                        onClick={() => outputClick(language.code)}
                        key={language.code}
                      >
                        {language.name}
                      </button>
                    </li>
                  ))}
                </ul>

Following code is for button which calls translate() on click:

<button
          type="button"
          className="btn btn-dark trans-btn"
          onClick={() => translate()}
        >
          Prevedi
        </button>

*Prevedi means Translate

Answer 1

Problem has been solved by going into Network and seeing what was exactly going to api, the following image will make you understand better:

When sending the first time the text is APPENDED to encodedParams and is sent correctly. The problem lies when I APPEND another text without clearing previous one which creates problem where both texts are sent, and if I change the text for the third time the last two texts are sent with the new one and just goes on and on, you can see it in this image:

Seems like api only takes first text and doesn't go to the last one and take that instead.
Anyways this problem is solved by clearing the appended text after fetch by adding next line:

encodedParams.delete("text", inp)

The function looks like this now: