Custom Material UI theme not picked up in emotion component

Question

Im implementing a mui theme through createStyles via `

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

which looks something like

createTheme({
 ...other stuff
 borders: { ... }
})

The theme gets created fine, and when using useTheme in a child component im able to see the custom borders object. However when logging the same from within the styled emotion component, it removes the non standard keys:

  const t = useTheme()
  console.log('t===',t)
  
  const S = styled('div')`
  backgroud-color: ${props => {
    console.log('inside----', props.theme)
    return 'red'
  }}`

t=== logs fine with the borders inside---- logs with the theme but without borders attached

Ive tried importing styled from @mui/material instead of @emotion/styled and both do the same. Ive also created a theme.d.ts for defining the custom theme via module augmentation but that also doesnt assis

declare module '@mui/material/styles' {
  interface CustomTheme {
    borders?: {
      lrg: any;
    };
  }

  interface Theme extends CustomTheme {}
  interface ThemeOptions extends CustomTheme {}
}

does anyone have any ideas?