Custom Breakpoint Not Showing in my breakpoint options

I'm using React: "^17.0.2" version, typescript: "^4.4.3" version, material design: "^5.0.3" version in my project. I have the following error while I want to add my custom breakpoint in theme and use it:

But I follow all the steps to create the custom breakpoint process, following is my code:

My Theme customization & Declaration code:

export const theme = () => {
  const colors = themeColor;

  return createTheme({
    palette: themePalette(colors),

    typography: themeTypography(colors),

    breakpoints: {
      values: {
        xs: 0,
        sm: 500,
        tablet: 768,
        md: 900,
        lg: 1280,
        xl: 1400,
      },
    },
  });
}; 

declare module "@mui/material/styles" {
  interface BreakpointOverrides {
    xs: true;
    sm: true;
    tablet: true;
    md: true;
    lg: true;
    xl: true;
  }
}

I also provide the theme like this:

import { ThemeProvider } from "@mui/material/styles";
import "animate.css";

import { theme } from "theme";
import FrontEndIndex from "views/frontend";

function App() {
  return (
    <ThemeProvider theme={theme()}>
      <FrontEndIndex />
    </ThemeProvider>
  );
}

export default App;
 

my folder structure is: App->frontend->homepage->category

here I faced a problem while trying to use my custom tablet breakpoint