I'm working through this resource from MUI. Despite my efforts, and looking through other similar posts on Stackoverflow, I can't get theme to behave. I'm using the verbatim instructions from the guide yet it's still showing a typescript error.

error:

Argument of type '{ status: { danger: "#ff9800"; }; }' is not assignable to parameter of type 'ThemeOptions'.
  Object literal may only specify known properties, and 'status' does not exist in type 'ThemeOptions'.

src/index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

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

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

const theme = createTheme({
  // type error appears here
  status: {
    danger: orange[500],
  },
});

root.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

root - material-ui.d.ts.

declare module "@mui/material/styles" {
  export interface Theme {
    status: {
      danger: string;
    };
  }
  // allow configuration using `createTheme`
  export interface ThemeOptions {
    status?: {
      danger?: string;
    };
  }
}

My assumption is that the theme that createTheme is using is going to reference the update module. Doesn't seem to be happening. Is material-ui.d.ts not the right location? Any ideas?