How to test (vitest) that a form's submit button is disabled while submitting

Question

I have the following test (modelled after this: https://github.com/orgs/react-hook-form/discussions/8866):

it("submission is disabled if form is still submitting", async () => {
    useParams.mockReturnValue({
      formSection: "1",
      operation: "create",
    } as QueryParams);
    const user = userEvent.setup();
    let resolve: (v: unknown) => void;

    const mockOnSubmit = vitest.fn().mockReturnValue(
      new Promise((_resolve) => {
        resolve = _resolve;
      })
    );

    render(
      <MultiStepFormBase
        {...defaultProps}
        disabled={false}
        onSubmit={mockOnSubmit}
      />
    );
    const saveAndContinueButton = screen.getByRole("button", {
      name: /Save and Continue/i,
    });
    await act(async () => {
      await user.click(saveAndContinueButton);
    });

    expect(saveAndContinueButton).toBeDisabled();

    await act(async () => {
      resolve(vitest.fn);
    });

    expect(saveAndContinueButton).not.toBeDisabled();
  });

The expectation the button is disabled always fails: Error: expect(element).toBeDisabled()

Received element is not disabled:

Thanks in advance for your help!

I expect the submit button to be disabled. I tried different versions of the test such as:

• https://github.com/orgs/react-hook-form/discussions/8866
• using fireEvent