Using MUI module augmention in a different file

Question

I was trying to extend MUI theme in my react-typescript project. So far i have successfully extended the them and looks like this : -

//import React from "react";
import { createTheme, PaletteColorOptions, Theme } from "@mui/material/styles";
import { brown, red } from "@mui/material/colors";
declare module "@mui/material/styles" {
  interface ThemeOptions {
    myField?: {
      myNestedField: string;
    };
  }
  interface PaletteOptions {
    brown: PaletteColorOptions;
  }
  interface SimplePaletteColorOptions {
    magic?: string;
  }
}

export const theme = createTheme({
  palette: {
    primary: {
      main: "#ffffff",
      magic: "#000000",
    },
    brown: {
      main: brown[300],
    },
  },
  myField: {
    myNestedField: "10px",
  },
});

The only issue I am facing is that all augmented stuff that is

declare module "@mui/material/styles" {
  interface ThemeOptions {
    myField?: {
      myNestedField: string;
    };
  }
  interface PaletteOptions {
    brown: PaletteColorOptions;
  }
  interface SimplePaletteColorOptions {
    magic?: string;
  }
}

I want to keep it in a seperate file, tried just adding into another file and importing that file here, but didnt worked out, have they mentioned anything on the doc about this or how I am supposed to do

Thanks !