How to test Material UI v5 components with sx props in @testing-library/react?

Question

React Testing Library does not apply sx props of Material UI components during rendering.

For example, I specify properties to hide an element at certain breakpoints.

<>
  <AppBar
    data-testid="mobile"
    ...
    sx={{
      display: { xs: "block", sm: "none" }
    }}
  >
    MOBILE
  </AppBar>
  <AppBar
    data-testid="desktop"
    ...
    sx={{
      display: { xs: "none", sm: "block" }
    }}
  >
    DESKTOP
  </AppBar>
</>

In the browser everything works as expected. When rendering in React Testing Library, I get a result with two elements. And it is clear from the styles that they are basic and the sx property was not applied. Link to codesandbox

import { ThemeProvider } from "@mui/material/styles";
import { screen, render } from "@testing-library/react";
import darkTheme from "./darkTheme";
import App from "./App";

describe("Demo", () => {
  it("should have display props", () => {
    render(
      <ThemeProvider theme={darkTheme}>
        <App />
      </ThemeProvider>
    );

    expect(screen.getByTestId("mobile")).toHaveStyle({ display: "none" });
    expect(screen.getByTestId("desktop")).toHaveStyle({ display: "block" });
  });
});

Test results

What is the correct way to test such Material UI props in React Testing Library?