React.js 中的每个映射项为 Function

Question

I have a function, which makes axios request to backend and returns me data about the category by category_id. In two words, it returns me a length of elements in table with this parameters.

async function getLength(category_id) {
    const res = await axios
      .post("/api/passwords/categories", {
        category_id,
        user_id,
      })
      .catch((err) => console.error(err));

    return res;
  }

  async function length(category_id) {
    const res = await getLength(category_id).then((data) => {
      return data.data.length;
    });

    console.log("WIP length: ", res);
    return res;
  }

I need for every mapped item make a request to function length() to take it's data:

 {categories.map((x, index) => {
            return (
              <div key={index} className="col-xl-3 col-lg-3 col-md-3 col-6">
                <div className="dashboard__categories-item">
                  <span style={{ color: `${x.color}` }}>{x.icon}</span>
                  <h5>{x.title}</h5>
                  <h5>Length: {length(x.id)})</h5>
                </div>
              </div>
            );
          })}

But, I have an error: error message image

It makes my brain more than 3 hours. Please, help me:D