useState not updating on test using vitest for react

As I was setting up my tests for the code, I got stuck that I can't fully understand.

My vitest log asks me to put my button click inside an act(), but it breaks by doing so. I don't fully understand why nor what is the possible solution.

function:

const handleSendJobsAssigned = async (event: React.MouseEvent) => {
setAssingingJobsLoading(true)
let counter = 0
let failed = false

try {
  for (const job of assignedJobs) {
    await api.put(url, {
      status: "test",
      assignee: 1
    })
    removeAssignedJob(1)
    counter += 1
  }
} catch (e) {
  failed = true
} finally {
  showToast(counter, failed)
  setAssingingJobsLoading(false)
  clearJobs()
  refreshSelectedTab()
}
}

not working 1:

await act( async () => {
  fireEvent.click(assignButton);

  //on click function
  await vi.waitFor(() => {
    expect(assignButton).toBeDisabled();
    expect(cancelButton).toBeDisabled();
  })

  //after click function
  await vi.waitFor(() => {
    expect(assignButton).toBeEnabled();
    expect(cancelButton).toBeEnabled();
  });
})

not working 2:

await act( async () => {
  fireEvent.click(assignButton);
})

//on click function
await vi.waitFor(() => {
  expect(assignButton).toBeDisabled();
  expect(cancelButton).toBeDisabled();
})

//after click function
await vi.waitFor(() => {
  expect(assignButton).toBeEnabled();
  expect(cancelButton).toBeEnabled();
});

working but with log error on vitest log:

fireEvent.click(assignButton);

//on click function
await vi.waitFor(() => {
  expect(assignButton).toBeDisabled();
  expect(cancelButton).toBeDisabled();
})

//after click function
await vi.waitFor(() => {
  expect(assignButton).toBeEnabled();
  expect(cancelButton).toBeEnabled();
});

Is there a workaround?