Material UI - วิธีขยายธีม MUI 5 ด้วย TypeScript

ฉันพยายามขยายธีม MUI 5 ด้วยการเพิ่มโมดูล TypeScript แต่กลับเจอข้อผิดพลาด

วัตถุ literal อาจระบุเฉพาะคุณสมบัติที่ทราบเท่านั้น และ 'status' ไม่มีอยู่ในประเภท 'ThemeOptions'

ดูเหมือนว่า TS จะไม่รู้จักการประกาศประเภทที่มีอยู่ใน theme.d.ts จะแก้ไขอย่างไรดี?

src/theme/theme.ts

import { createTheme } from '@mui/material';

const theme = createTheme({
    palette: {},
    typography: {},
    components: {},
    status: {
        danger: '#ee7403'
    }

});

export default theme;

src/theme.d.ts

declare module '@mui/material/styles' {
    interface Theme {
      status: {
        danger: string;
      };
    }
    
    interface ThemeOptions {
      status?: {
        danger?: string;
      };
    }
  }

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src", "index.d.ts", "theme.d.ts"]
}

ในขณะเดียวกัน ถ้าฉันย้ายทุกอย่างจาก theme.d.ts ไปที่ theme.ts ทุกอย่างก็ทำงานได้ดี แต่ฉันอยากเก็บการเพิ่มโมดูลในไฟล์แยก จะทำอย่างไรดี?