How to add custom property to palette in MUI custom theme

Question

I m using React JS with VITE typescript, I'm creating custom theme for light and dark modes. I would like to add custom properties to palette such as gradients.

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

interface CustomPalette extends Palette {
  gradients: {
    primary: string;
    secondary: string;
  };
}

interface CustomTheme extends Theme {
  palette: CustomPalette;
}

const lightTheme: CustomTheme = createTheme({
  palette: {
    mode: 'light',
    primary: {
      main: '#3029D9',
      gradients: {
        primary: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
        secondary: 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)',
      },
    },
  },
});

const darkTheme: CustomTheme = createTheme({
  palette: {
    mode: 'dark',
    primary: {
      main: '#add8e6',
      gradients: {
        primary: 'linear-gradient(45deg, #8E2DE2 30%, #4A00E0 90%)',
        secondary: 'linear-gradient(45deg, #00B4D8 30%, #0077B6 90%)',
      },
    },
  },
});

const themeModes = {
  lightTheme,
  darkTheme,
};

export default themeModes;

I would like to add any custom color properties to palette.