findByTestId having different behavior depending on the order of tests

Question

I have the following tests for my React component:

  it("Should render detail page", () => {
    const { getByTestId } = render(<PrimaryStory id="123456" />);
    const objectPage = getByTestId("object-page-wrapper");
    expect(objectPage).toBeInTheDocument();
  });
  
  it("Should render the button", () => {
    const { getByTestId } = render(<PrimaryStory id="123456" />);
    const button = getByTestId("button-wrapper");
    expect(button).toBeInTheDocument();

They both pass, but we get the famous warning "React updates should be wrapped into act" because our component uses some webcomponents from an external library that have some updates during render. Following the tips from Kent C. Dodds on this blogpost, I tried to change my tests to the following:

  it("Should render detail page", async () => {
    const { findByTestId } = render(<PrimaryStory id="123456" />);
    const objectPage = await findByTestId("object-page-wrapper");
    expect(objectPage).toBeInTheDocument();
  });

  it("Should render the button", async () => {
    const { findByTestId } = render(<PrimaryStory id="123456" />);
    const button = await findByTestId("button-wrapper");
    expect(button).toBeInTheDocument();
  });

This removes the warning, but the second test is not passing anymore. I can't understand exactly why this happens, but even then I tried to change the order of the tests (first the button, then the ObjectPage) and then both passed! Why would the order influence the tests in this situation?

To make it clear, my component "PrimaryStory" is a story created via composeStory from "@storybook/testing-react". My component rendered in the story looks like this:

export interface DetailProps {
  id: string;
}

export const TenderingDetail: React.FC<DetailProps> = ({ id }) => {
  const { t } = useTranslation();

  return (
    <ObjectPage
      data-testid="object-page-wrapper"
      headerTitle={
        <DynamicPageTitle
          actions={
            <Button data-testid="button-wrapper">
              {t("translationKey")}
            </Button>
          }
        />
      }
    />
  );
};