Material UI doesn't read custom interfaces

Question

I have a custom defined index.d.ts file inside @types/@mui folder in order to define custom interfaces for the edited material ui components.

Here is my index.d.ts file:

import { DefaultTheme } from '@mui/system';
import { CSSProperties } from "@mui/material/styles/createMixins";

declare module '@mui/material/styles/createMixins' {
  export interface Mixins {
    appBar: {
      mobile: CSSProperties;
      desktop: CSSProperties;
    };
    sidebar: {
      collapsed: CSSProperties;
      expanded: CSSProperties;
    };
    container: CSSProperties;
    content: CSSProperties;
  }
}

Here is a custom component I have built:

import React from 'react';
import Box, { BoxProps } from '@mui/material/Box';
import { styled } from '@mui/material/styles';

const ContentBox = styled(Box)<ContentProps>(
  ({ expanded, open, theme: { breakpoints, mixins, transitions } }) => ({
    flexGrow: 1,
    overflow: 'hidden',
    position: 'relative',
    paddingTop: `${56}px`,
    transition: transitions.create(['margin', 'width'], {
      easing: transitions.easing.sharp,
      duration: transitions.duration.leavingScreen,
    }),

    [breakpoints.up('md')]: {
      paddingTop: `${mixins.appBar.desktop.minHeight}px`,
    },

    [breakpoints.up('xl')]: {
      width: open
        ? `calc(100% - ${mixins.sidebar[expanded ? 'expanded' : 'collapsed'].minWidth}px)`
        : '100%',
      marginLeft: open
        ? mixins.sidebar[expanded ? 'expanded' : 'collapsed'].minWidth
        : 0,
    },
  })
);

Uncaught TypeError: Cannot read properties of undefined (reading 'expanded')

meaning that it doesn't pick up the definitions from the index.d.ts

The problem is here ${mixins.sidebar[expanded ? 'expanded' : 'collapsed'].minWidth}

Why doesn't my Material UI pick up the index.d.ts definitions?