Почему полезная нагрузка запроса пуста при использовании useState для установки в React?

У меня есть асинхронная функция внутри useEffect для извлечения данных на основе заданного ввода из базы данных (mongodb) с использованием Express.js. При отправке формы она должна передать состояние (введенные данные) на сервер и найти данные, а затем вернуть результат обратно в интерфейс. Но при отправке отправить пустое состояние и вернуть пустой массив.

ОтветЗапрос

Компонент реакции:Compare.js `

import React, { useState, useCallback } from "react";
import { useEffect } from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Result from "./Result";

export default function () {
  const [compare, setCompare] = useState({
    proId1: "",
    proId2: "",
  });

  function handleChangeEvent(event) {
    const { value, name } = event.target;
    setCompare((prevData) => ({
      ...prevData,
      [name]: value,
    }));
  }



  const fetchData = useCallback(async () => {
    const response = await fetch("http://localhost:3000/api/compare", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        proId1: compare.proId1,
        proId2: compare.proId2,
      }),
    });

    const data = await response.json();
    return data
  }, []);

  return (
    <>
      <div>
        <h1>ENTER IDS TO COMPARE</h1>
        <form>
          <input
            type = "text"
            className = "proId1"
            placeholder = "proId1"
            name = "proId1"
            onChange = {handleChangeEvent}
            value = {compare.proId1}
          />
          <input
            type = "text"
            className = "proId2"
            placeholder = "proId2"
            name = "proId2"
            onChange = {handleChangeEvent}
            value = {compare.proId2}
          />

          <button
            className = "submit"
            onClick = {
              React.useEffect(() => {
                fetchData()
              },[fetchData])
            }
          >
            SUBMIT
          </button>
        </form>
      </div>
      <Result />
    </>
  );
}

` сервер:

`

app.post("/api/compare", async  (req, res) => {
  try {
     let id1 = await req.body.proId1;
    let id2 = await req.body.proId2;
    let result = await model.find({ id: { $in: [id1, id2] } })
    res.send(result)
  } catch (error) {
    res.json({ status: "error", error: "error" });
  }
});

` ожидаемый запрос:

`

{
    "proId1":"1",
    "proId2":"3"

}

expected Response

[
    {
        "_id": "637c5dddb9b084433f13d3f7",
        "id": "1",
        "name": "dffdf",
        "price": "100$",
        "ratings": "2",
        "__v": 0
    },
    {
        "_id": "637c5df3b9b084433f13d3fb",
        "id": "3",
        "name": "dffdf",
        "price": "25$",
        "ratings": "5",
        "__v": 0
    }
]

`