breakpoints not working with useResponsiveValue

[danimadmolil]

Hellow, i'm new to theme-ui. my project is simple react-app.on index.js i create a theme and use it with ThemeProvider like this:

index.js

const theme = {
 breakpoints: [
    "@media screen and (min-width:300px) and (max-width:499px)",
    "@media screen and (min-width: 500px) and (max-width:899px)",
    "@media screen and (min-width: 900px)",
  ],
} 
<ThemeProvider theme={theme}>
   <App/>
</ThemeProvider>

App.js

import { useResponsiveValue, useBreakpointIndex } from "@theme-ui/match-media";
function App(){
  const color = useResponsiveValue((theme) => ["red", "blue", "orange"]);
  return <div className="app" style={{backgroundColor:color}}></div>
} 

the result color is always red. i'm not sure why it's like that. can any one help me please?
note:if i use breakpoint:['40em','50em','60em'] it work fine but i like to use media queries with condition like (min-width) and (max-width).

[hasparus]

Nice catch @danimadmolil! I'll try to fix this ASAP. Just created #2197 to track this problem.