How to hide api key and pass input data to backend file

Backend Development
1

I build translator app in React js and tailwindcss and I use google translate api from rapid api

The frontend code that does the translation functionality in src/Main.js
When I searched about the issue I understand that I should hide api key.

The frontend code:

 const handleTranslate = async () => {
    const { inputFrom, languageFrom, languageTo } = formData;
   
    const encodedParams = new URLSearchParams();
    encodedParams.append("q", inputFrom);
    encodedParams.append("target", (languageTo || "").split(" ")[0]);
    encodedParams.append("source", (languageFrom || "").split(" ")[0]);
    const options = {
      method: "POST",
      url: "https://google-translate1.p.rapidapi.com/language/translate/v2",
      headers: {
        "content-type": "application/x-www-form-urlencoded",
        "Accept-Encoding": "application/gzip",
        "X-RapidAPI-Key": apiKey,
        "X-RapidAPI-Host": "google-translate1.p.rapidapi.com",
      },
      data: encodedParams,
    };

    try {
      const response = await axios.request(options);
      console.log(response.data);
      setFormData((prevData) => {
        return {
          ...prevData,
          inputTo: response.data.data.translations[0].translatedText,
        };
      });
    } catch (error) {
      console.error(error);
    }
  }

I don’t know how to receive the inputFrom, languageFrom, languageTo in the backend

The backend code (server.js):

const PORT = 8000;
const axios = require("axios").default;
const express = require("express");
const cors = require("cors");
require("dotenv").config();

const app = express();
app.use(cors());

app.listen(PORT, () => console.log("Backend is running"));

The source code: