Material UI: TypeError: Cannot read properties of undefined (reading 'up')

I have this component and I'm trying to use "breakpoint", but I get this error, Note that I am using the latest version of the material:

Property 'breakpoints' does not exist on type 'DefaultTheme'

file.tsx:

import { Grid } from "@mui/material";
import { makeStyles } from '@mui/styles';
import { FC } from "react";
import ResponsiveConstants from "./ResponsiveConstants";

const useStyles = makeStyles((theme) => ({
  root: {
    [theme.breakpoints.up(ResponsiveConstants.mobileBreakpoint)]: {
      minHeight: 600,
    },
  },
}));

const ResponsiveContainerGrid: FC = ({  children }) => {
  const classes = useStyles();

  return (
    <div>
      <Grid
        className={classes.root}
        container
        direction="row"
        justifyContent="center"
        alignItems="center"
      >
        {children}
      </Grid>
    </div>
  );
};

export default ResponsiveContainerGrid;

Then I tried to modify the code and used the following instruction:

import { Theme } from '@mui/system';

And the code became:

import { Grid } from "@mui/material";
import { makeStyles } from '@mui/styles';
import { FC } from "react";
import ResponsiveConstants from "./ResponsiveConstants";
import { Theme } from '@mui/system';

const useStyles = makeStyles((theme: Theme) => ({
  root: {
    [theme.breakpoints.up(ResponsiveConstants.mobileBreakpoint)]: {
      minHeight: 600,
    },
  },
}));

const ResponsiveContainerGrid: FC = ({  children }) => {
  const classes = useStyles();

  return (
    <div>
      <Grid
        className={classes.root}
        container
        direction="row"
        justifyContent="center"
        alignItems="center"
      >
        {children}
      </Grid>
    </div>
  );
};

export default ResponsiveContainerGrid;

But I had a problem, which is:

TypeError: Cannot read properties of undefined (reading 'up')

How can I solve the first or second problem?