How to make async function to sync in map function?

Question

    function tablemap(data, index) {
        console.log("1 screen loading", sortData.isLoaded);
        console.log("2 screen data", data);
        console.log("3 screen data pedometer", data.pedometer);
    }

  {sortData.isLoaded
    ? sortData?.data.map((item, index) => tablemap(item, index))
    : null}

It seems really weird.

when I console data it shows the second console result.

if you see the data dict, it has pedometer 162.

however when I console data.pedometer at the same time in below line, it prints 0, not 162.

So the problem is not just about console.

function tablemap(data, index) {
    console.log("1 screen loading", sortData.isLoaded);
    console.log("2 screen data", data);
    console.log("3 screen data pedometer", data.pedometer);
    const indexodd = index % 2 == 0;
    const birthDate =
      data.birthday.slice(0, 2) + " / " + data.birthday.slice(2, 4);
    return (
      <tr key={data.id}>
        <td
          className={`${
            indexodd ? "bg-gray-100" : "bg-white"
          } border-b-1 border-slate-300 justify-center items-center px-2 py-1 text-left text-sm`}
        >
          {data.pedometer}
        </td>
</tr>
)}

so in above code, data.pedometer shows 0, not 162.

How can I make this be shown as 162?