I was using the default breakingpoint provided by Material UI for my media queries , then added one more breaking point (mobile : 400) , all the other breaking points works fine except when i reach to the width of 400px the changes doesnt take effect at that point , am i doing anything wrong here?

const theme = createTheme({
 breakpoints: {
      values: {
        xs: 0,
        mobile: 400,
        sm: 600,
        md: 900,
        lg: 1200,
        xl: 1536,
      },
    },

at below when the screen reachs 600px width MQsm value turns to 'true' , but when i reach the width of 400px MQmb doesnt change.

const Navbar = (props) => {
  const cartQuantity = useSelector((state) => state.cart.totalQuantity);
  const classes = useStyles();
  const theme = useTheme();
  const MQsm = useMediaQuery(theme.breakpoints.down("sm")); //600px
  const MQmb = useMediaQuery(theme.breakpoints.down("mobile")); //360px
  console.log(MQsm);
  console.log(MQmb);