Type error: Cannot find type definition file for 'theme'. The file is in the program because: Entry point for implicit type library 'theme'

I'm build a NextJs Project getting following error while building it,

I tried following ways

1. removing .next folder and try to compile again
2. removed node_modules and package-lock.json file and then tried again

getting this error (Terminal logs after running npm run build)

 - Environments: .env.local

   Creating an optimized production build ...
 ⨯ Failed to find font override values for font `Protest Guerrilla`
 ⨯ Failed to find font override values for font `Protest Guerrilla`
 ✓ Compiled successfully
   Linting and checking validity of types  ..Failed to compile.

Type error: Cannot find type definition file for 'theme'.
  The file is in the program because:
    Entry point for implicit type library 'theme'

Package.json

{
  "name": "app_name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/cache": "^11.13.1",
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@flaticon/flaticon-uicons": "^3.3.1",
    "@mui/icons-material": "^6.1.2",
    "@mui/material": "^6.1.2",
    "@mui/material-nextjs": "^6.1.2",
    "@tanstack/react-query": "^5.59.9",
    "axios": "^1.7.7",
    "next": "14.2.14",
    "next-auth": "^4.24.8",
    "react": "^18",
    "react-dom": "^18",
    "react-hook-form": "^7.53.0"
  },
  "devDependencies": {
    "@tanstack/eslint-plugin-query": "^5.59.7",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@typescript-eslint/eslint-plugin": "^7.18.0",
    "@typescript-eslint/parser": "^7.18.0",
    "eslint": "^8",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^18.0.0",
    "eslint-config-next": "14.2.14",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.2.1",
    "prettier": "^3.3.3",
    "typescript": "^5"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*", "./src/theme/*"]
    },
    "typeRoots": ["./node_modules/@types", "./src/app/types"],
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/app/types/theme/theme.d.ts", "src/app/types/**/*.ts"],
  "exclude": ["node_modules"]
}

Got the solution,

Here are the steps that I followed

1. update the Typescript
2. Since I have modified default MUI theme by adding custom breakpoints, I have explicitly defined the types for it in separate module file.
3. Added that explicit file path in tsconfig like this

"paths": {
     "@/*": ["./src/*", "./src/app/types/theme/*"]
   },