I am trying to send the data from my React App to Google Sheets using Google AppScript. But what error I am facing is that the data integrated is jumbled partially. Here’s the code of my React App:

const Questions = () => {
  const user = useSelector((state) => state.user);
  const dispatch = useDispatch();
  const navigate = useNavigate();

  useEffect(() => {
    if (!sessionStorage.id) {
      navigate("/");
    }
  }, [navigate]);

  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
  const [selectedOptions, setSelectedOptions] = useState(
    Array(questionsData.length).fill(null),
  );
  const totalQuestions = questionsData.length;
  const currentQuestion = questionsData[currentQuestionIndex];
  const [showSelectOptionError, setShowSelectOptionError] = useState(false);

  const optionWords = [
    ["rationalizing", "trivializing", "compromising", "projection"],
    ["trivializing", "projection", "rationalizing", "avoiding"],
    ["projection", "rationalizing", "displacement", "trivializing"],
    ["avoiding", "rationalizing", "denial", "trivializing"],
    ["rationalizing", "trivializing", "avoiding", "compromising"],
    ["attacking", "avoiding", "compromising", "compensation"],
    ["projection", "attacking", "rationalizing", "trivializing"],
    ["avoiding", "compensation", "displacement", "intellectualization"],
    ["denial", "projection", "rationalizing", "trivializing"],
    ["substituting", "rationalizing", "trivializing", "intellectualization"],
  ];

  const onSelect = (option) => {
    const updatedSelectedOptions = [...selectedOptions];
    updatedSelectedOptions[currentQuestionIndex] = option;
    setSelectedOptions(updatedSelectedOptions);
    setShowSelectOptionError(false);
  };

  const handleNext = () => {
    if (selectedOptions[currentQuestionIndex] !== null) {
      setCurrentQuestionIndex((prevIndex) =>
        Math.min(prevIndex + 1, totalQuestions - 1),
      );
    } else {
      setShowSelectOptionError(true);
    }
  };

  const handlePrev = () => {
    if (showSelectOptionError) {
      setShowSelectOptionError(false);
      setCurrentQuestionIndex((prevIndex) => Math.max(prevIndex - 1, 0));
    }
    setCurrentQuestionIndex((prevIndex) => Math.max(prevIndex - 1, 0));
  };

  const handleSubmit = async () => {
    const userData = {
      name: user.name,
      email: user.email,
      education: user.education,
      gender: user.gender,
      dateOfBirth: user.dateOfBirth,
    };

    const data = {
      ...userData,
      ...selectedOptions.reduce((acc, option, index) => {
        if (option !== null) {
          const wordOption = optionWords[index][option - 1];
          acc[`question${index + 1}`] = wordOption;
        }
        return acc;
      }, {}),
    };

    const proxyUrl = "http://localhost:8080/";
    const targetUrl = import.meta.env.VITE_GoogleAppScript;
    console.log(data);

    try {
      const params = new URLSearchParams(data);
      const body = params.toString();

      const response = await fetch(`${proxyUrl}${targetUrl}`, {
        method: "POST",
        body: body,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      });

      console.log("nnData recieved: " + response);

      dispatch(setUserDetails(initialUserState));
      sessionStorage.clear("id");
      navigate("/thankyou");
    } catch (error) {
      console.error("Error:", error);
    }
  };

And here’s my Google AppScript code:

const sheets = SpreadsheetApp.openByUrl("google-sheet-url");
const sheet = sheets.getSheetByName("sheet-name");

function doPost(e) {
  const data = e.parameter;

  console.log("Received Data:", data);

  const name = data.name;
  const email = data.email;
  const education = data.education;
  const gender = data.gender;
  const dateOfBirth = data.dateOfBirth;
  const question1 = data.question1;
  const question2 = data.question2;
  const question3 = data.question3;
  const question4 = data.question4;
  const question5 = data.question5;
  const question6 = data.question6;
  const question7 = data.question7;
  const question8 = data.question8;
  const question9 = data.question9;
  const question10 = data.question10;


  sheet.appendRow([name, email, education, gender, dateOfBirth, question1, question2, question3, question4, question5, question6, question7, question8, question9, question10]);

    const response = ContentService.createTextOutput(JSON.stringify(data));
  response.setMimeType(ContentService.MimeType.JSON);
  response.setStatusCode(200);
  const headers = {
    "Access-Control-Allow-Origin": "http://localhost:3000"
  };
  return response.setResponseHeaders(headers);
}

[enter image description here](https://i.sstatic.net/oJcNfObA.png)

I tried every possible debugging, but do not know why the server side changes the data format