Nuxt3 UseFetch query Array

Question

In my app i want to send an array to the api.

Frontend:

async getMaterialDetails() {
  this.loading = true;
  const ids = this.materials.map((mat) => {
    return mat.FK_ITEM;
  })
  console.log(ids);
  const { data } = await useFetch("/api/material/getMaterials", {
    query: [ids],
  })
  if (typeof data === "string") {
    console.log("An error occurred: ", data);
  } else {
    console.log(data)
    for (const m of this.materials) {
      const details = data.find((d) => d.PK_R_ITEM === m.FK_ITEM);
      if (details) {
        m.details = details;
      }
    }
    this.loading = false;
  }

Backend:

export default defineEventHandler(async (event) => {
  const ids = getQuery(event); // Array [128]

  console.log("Start Query test");
  console.log(ids);

  const data = await (
    await MaterialRidder.findAll({
      where: { PK_R_ITEM: { [Op.in]: ids[0] } },
    })
  ).map((el) => el.get({ plain: true }));

  if (typeof data === "string") {
    return "Iets mis";
  } else {
    return data;
  }
});

In the frontend the log of ids is an Array. When making the API call en logging it on the backend, the structure changes.

• For one result from the map on the frontend, this is the backend result => {"0", "128"}
• For an array with more the one entry, this is the result on the backend => {"0", [128,130,150] }

How i'm a using UseFetch so wrong that it messes up my structures?

Thank you for your help