I have modified the breakpoint "lg" to 500 and the media query does not seem to accept this modified value as it does not change the color to green when I minimize chrome to below 500px.

const themee = createTheme({
  breakpoints: {
    values: {
      xs: "0",
      sm: "100",
      md: "300",
      lg: "500",
      xl: "800",
    },
  },
});
const useStyles = makeStyles({
  Remove: {
    fontSize: "12pt",
    color: "red",
    [themee.breakpoints.down("xl")]: {
      color: "green",
    },
  },
});