I have taken the reference from this question for creating breakpoints and in my application I have used GridList. I am giving number of columns based on the screen width.

Code for determining the number of columns:

function getCols(screenWidth) {
   
    if (isWidthUp('xl', screenWidth)) {
      return 5;
    }

    if (isWidthUp('lg', screenWidth)) {
      return 4;
    }

    return 4;
  }

code for breakpoints and other custom styles:

const BREAKPOINTS = {
  xs: 0,
  sm: 600,
  md: 960,
  lg: 1024,
  xl: 1280
};

const breakpointsValues = {
  breakpoints: {
    values: BREAKPOINTS
  }
};

const theme =  createMuiTheme({
  palette,
  overrides,
  typography: {
    "fontFamily": `Montserrat`,
    "fontSize": 14,
    "fontWeightLight": 350,
    "fontWeightRegular": 450,
    "fontWeightMedium": 550
   },
   ...breakpointsValues
});

Problem is when I am inspecting and using device toolbar, whenever I am changing the width, screen size is getting consoled correctly but when I am changing the resolution from device's setting to 1024*768 or any other resolution every time screen width is printed as "xl".

I looked up the docs and forum but couldn't find any solution