Tengo una función que hace una solicitud de axios al backend y me devuelve datos sobre la categoría por category_id. En dos palabras, me devuelve una longitud de elementos en la tabla con estos parámetros.

 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; }

Necesito para cada elemento mapeado hacer una solicitud a la función length() para tomar sus datos:

 {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> ); })}

Pero tengo un error: imagen de mensaje de error

Hace que mi cerebro más de 3 horas. Por favor ayúdame :D