TS Augmentation not working when adding new props in v5

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When trying to add a new prop and customize it, TS will still complain this prop doesn't exist. The documentation lack some examples on how to add new props, it only shows how to add new variants. I tried with:

import '@mui/material/TableRow'

declare module '@mui/material/TableRow' {
  interface TableRowProps {
    clickable?: boolean;
  }
}

I also tried changing the TableRowProps to TableRowPropsOverrides, but it still the same.

I added the prop to my theme to style it:

MuiTableRow: {
    styleOverrides: {
      root: {
        height: '80px',
      },
      head: {
        height: 'unset',
      },
    },
    variants: [
      {
        props: { clickable: true },
        style: {
          '&:hover': {
            cursor: 'pointer',
          },
        },
      },
    ],
  },

I don't have any TS error on my theme override, but when using the component, TS throws an error saying the clickable prop doesn't exist:

Expected behavior 🤔

TS would allow this new added prop to the component

Steps to reproduce 🕹

I created a codesandbox replicating the issue: https://codesandbox.io/s/mui-tablerow-wjem8?file=/src/App.tsx

Context 🔦

I'm trying to add a new prop to a component and customize it. I don't want to wrap this component in a new custom component, I want to use the component directly from MUI with my customized theme

Your environment 🌎

  System:
    OS: macOS 12.2.1
  Binaries:
    Node: 16.13.1 - ~/.nvm/current/bin/node
    Yarn: 1.22.17 - ~/.nvm/current/bin/yarn
    npm: 8.1.2 - ~/.nvm/current/bin/npm
  Browsers:
    Chrome: 98.0.4758.80
    Edge: Not Found
    Firefox: 97.0
    Safari: 15.3
  npmPackages:
    @emotion/react: ^11.7.1 => 11.7.1 
    @emotion/styled: ^11.6.0 => 11.6.0 
    @mui/base: ^5.0.0-alpha.68 => 5.0.0-alpha.68 
    @mui/icons-material: ^5.4.1 => 5.4.1 
    @mui/lab: 5.0.0-alpha.67 => 5.0.0-alpha.67 
    @mui/material: ^5.4.0 => 5.4.0 
    @mui/private-theming:  5.3.0 
    @mui/styled-engine:  5.3.0 
    @mui/system:  5.4.0 
    @mui/types:  7.1.0 
    @mui/utils:  5.4.1 
    @mui/x-data-grid: ^5.0.1 => 5.1.0 
    @types/react:  17.0.37 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript: ^4.2.4 => 4.5.2 

Start with the linked CodeSandbox and the TableRow TypeScript declarations used by @mui/material/TableRow. Reproduce the error with the clickable prop and compare the documented augmentation patterns. Done means TypeScript accepts the prop on TableRow while the theme variant remains usable.