Как дождаться появление блока при запросе на API при тестировании? Vitest

Почему-то не дожидается появления блока после запроса.

it('Throws an error if the delivery distance is too far', async () => {
        render(<App />)

        // Fill out the form
        fireEvent.input(screen.getByTestId("venueSlug"), { target: { value: "home-assignment" } });
        fireEvent.input(screen.getByTestId("cartValue"), { target: { value: "8" } });
        fireEvent.input(screen.getByTestId("userLatitude"), { target: { value: "38.3785686" } });
        fireEvent.input(screen.getByTestId("userLongitude"), { target: { value: "56.740814" } });

        // Submit the form
        fireEvent.click(screen.getByRole("button", { name: /calculate the delivery price/i }));

        await waitFor(() => {
            expect(screen.getByTestId("loadingState")).toBeInTheDocument()
        })
        await waitFor(() => {
            expect(screen.getByTestId("errorMessage")).toBeInTheDocument()
        })
        screen.debug()
        expect(screen.getByTestId("errorMessage")).toHaveTextContent('Delivery distance is out of range.');
        expect(screen.getByTestId("errorMessage")).toHaveAttribute('data-raw-value', 'Delivery distance is out of range.');
    })

Также само приложение

{
                calculationLoading &&
                <div className="text-center">
                    <span data-testid="loadingState" className="text-xl">Loading...</span>
                </div>
            }
            {
                calculatedData.data ?
                    <PriceBreakdown calculatedData={calculatedData} />
                    :
                    <div className="text-center">
                        <span data-testid="errorMessage" data-raw-value={calculatedData.message} className="text-xl text-red-500">{calculatedData.message}</span>
                    </div>
            }

Использую vitest, react-testing-library, jest-dom. Мне нужно дождаться вывода ошибки в UI, но каждый раз выдает ошибку