one proposal can be to push the map result in array

idsArr.push(...Object.keys(ids).map(key => ids[key]));

Moreover when you set the id if you don't return nothing the map method should not be used.

A loop like foreach is a better choice

map method is used to get a "transformed" array

  attribute.forEach((item, index) => {
       setIds({ ...ids, [index]: item.id })
  })

let idsArr = [];

let ids = {
  'test': 1,
  'test2': 2
};
idsArr.push(...Object.keys(ids).map(key => ids[key]));

console.log(idsArr);

Issue

You are enqueueing a bunch of React state updates inside a loop, using a normal update, and as each update is processed by React it uses the same value of ids from the render cycle they were all enqueued in. In other words, each update stomps the previous one and the last state update wins. This is the state value you see on the subsequent render cycle.

Solutions

Use functional state updates to enqueue each update and have each update from the previous state instead of the state from the callback closure.

Example:

attribute.forEach((item, index) => {
  setIds(ids => ({
    ...ids,
    [index]: item.id,
  }))
});

With the correctly updated ids array state, you should be able to iterate and push values into the other array:

const idsArr = [];
Object.keys(ids).map(key => {
  idsArr.push(ids[key]);
});

Or just get the array of values directly:

const idsArr = Object.values(ids);