Evaluate sx prop when native app window dimensions changes (e.g. on rotation)

[ts-candide]

Let's say we have a Box which utilises the sx prop to build a responsive design:

<Box
  h={200}
  sx={{
    "@base": {
      w: "$full",
      bg: "$cyan500"
    },
    "@md": {
      w: "$1/2",
      bg: "$amber500"
    },
    "@lg": {
      w: "$1/4",
      bg: "$green500"
    },
  }}
/>

Similar to the web platform, I'd like this to re-evaluate the sx prop when the screen dimensions changes, e.g. when the device is rotated. However, this isn't currently happening.

See screencast below, which is based on this Snack. Using the default media queries, when rotating, I'd expect the box to change width and colour, as a different breakpoint is hit. But this doesn't happen, until the app is reloaded.

How can I achieve this outcome?

Screen.Recording.2023-11-23.at.11.15.51.mov

[ts-candide]

I'm working around this with useBreakpointValue for now.