Как изменить точки останова Rebass?

Question

Я пытаюсь изменить точки останова по умолчанию, но это не работает. Я следовал документам и использовал ThemeProvider, но Rebass по-прежнему использует точки останова по умолчанию. Вместо использования emotion-theming, Я использую @emotion/reactиз-за этой ошибки:

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

Я использую эти версии:

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

Мой код

_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>
  );
}

КодПесочница

Я также создал песочницу для воспроизведения: https://codesandbox.io/s/rebass-themeprovider-wcc6b .

Ожидания

Точки останова должны быть 768pxа также 1024pxвместо 40emа также 52em.