How to change the breakpoints of Rebass?

Question

I'm trying to change the default breakpoints, but it's not working. I followed the docs and used ThemeProvider, but Rebass is still using the default breakpoints. Instead of using emotion-theming, I use @emotion/react because of this error:

Error: `emotion-theming` has been removed and all its exports were moved to `@emotion/react` package

I use these versions:

"@emotion/react": "^11.1.5",
"rebass": "^4.0.7"

My Code

_app.js

import { ThemeProvider } from "@emotion/react";

const theme = {
  breakpoints: ["768px", "1024px"]
};

export default function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

index.js

import { Box, Flex } from "rebass";

export default function IndexPage() {
  return (
    <Flex sx={{ flexDirection: ["column", "column", "row"] }}>
      <Box sx={{ width: ["100%", "100%", "50%"], marginBottom: [10, 25, 0] }}>
        Hello
      </Box>
      <Box sx={{ width: ["100%", "100%", "50%"] }}>World</Box>
    </Flex>
  );
}

CodeSandbox

I've also created a sandbox for reproduction: https://codesandbox.io/s/rebass-themeprovider-wcc6b

Expectations

The breakpoints should be 768px and 1024px instead of 40em and 52em.