Material UI v5 ThemeProvider typescript error when I want to change the default font

Question

I want to change the default font of Material UI to "roboto-condensed" So firstly I used npm install @fontsource/roboto-condensed and then import "@fontsource/roboto-condensed" inside my app.js

I made a file as theme.ts

import { createTheme, Theme } from "@mui/material/styles";

const theme: Theme = createTheme({
  typography: {
    fontFamily: "roboto-condensed",
  },
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        "@font-face": {
          fontFamily: "roboto-condensed",
        },
        body: {
          fontSize: "3rem",
          color: "purple",
        },
      },
    },
  },
});
export default theme;

Then inside my app.js

...
render (
<ThemeProvider theme={theme}>
...
</ThemeProvider>
)

Then I get an error as JSX element type 'ThemeProvider' does not have any construct or call signatures.ts(2604)

does it related to webpack maybe? I did not change and even make webpack.config.js