Repository: material-ui
Issue: Using `Omit` in Typescript to remove props from end user breaks `component={}` prop and type inference
Labels: bug 🐛,typescript

### Duplicates

- [X] I have searched the existing issues

### Latest version

- [X] I have tested the latest version

### Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/wandering-darkness-mevzqv?file=/src/App.tsx

Example shows this behaviour for a polymorphic component (`Button`) and a simpler component, `Select`.

Steps:

1. Import MUI Component and its component prop type, i.e. `Select` and `SelectProps`
2. Use Typescript's `Omit` function to remove an optional prop, `Omit<SelectProps, "defaultOpen">`
3. Export a new wrapper component with the newly created type from Step 2
4. Watch the TypeScript types breaking by either re-enables the removed prop when using `component="a"` on `Button` or loosing type inference of the `Select` value where `event.target.value` becomes `unknown` instead of `string` (see example)


### Current behavior 😯

Removing props from the Typescript interface, breaks general types applying to the modified component.

For polymorphic components that support the `component="x"` prop, setting it will re-enable the Omit'ed prop.

For other components, the components type inference breaks and event handler values result in `unknown` instead of `string` or its appropriate type.

### Expected behavior 🤔

I would like to remove some of the defined props or prop values from the typescript types for components without breaking other typed functionality.

If I choose to `Omit` a prop, the other props should continue working as normal.

### Context 🔦

We are using Material UI Core (and MUI X Pro) to build an in-house Design System.

We want to make minimal changes/simplifications to the component types to guide our end-users towards using the components as we intend them to be used.

Material UI provides a rich interface of custom component options via its props and often times we would like to curate which props are available to our internal development teams that use our library.

In order to do so, our intend is to re-export MUI components with modified typescript types which "hide" the props we don't want our users to set/use.

### Examples
Examples for `Button` and `Select` of this are below:

```tsx
import MuiButton from '@mui/material/Button';
import type { ButtonProps as MuiButtonProps } from '@mui/material/Button';

type ExcludedMuiProps =
  | 'disableFocusRipple'
  | 'disableElevation'
  | 'disableRipple'
  | 'color';

interface ButtonProps extends Omit<MuiButtonProps, ExcludedMuiProps> {
  color?: Exclude<MuiButtonProps['color'], 'inherit'>;
}

export type { ButtonProps };

export const Button: React.FC<ButtonProps> = MuiButton;
```

This should result in 3 props not being suggested in the typescript intellisense:
- `disableFocusRipple`
- `disableElevation`
- `disableRipple`

And should remove the `inherit` option from the `color` prop.

```tsx
import MuiSelect from '@mui/material/Select';
import type { SelectProps as MuiSelectProps } from '@mui/material/Select';

type ExcludedMuiProps = 'defaultOpen' | 'IconComponent' | 'displayEmpty';

interface SelectProps extends Omit<MuiSelectProps, ExcludedMuiProps> {
  component?: React.ElementType;
}

export type { SelectProps };
export const Select: React.FC<SelectProps> = MuiSelect;
```

### Wrong approach?

If this is the wrong approach for curating which props or which prop values are available to our development teams, I would love to learn the idiomatic way to do this as we really want to limit the scope of our end users (internal) to set props we don't want to support/use for brand consistency.

### Your environment 🌎

<details>
  <summary><code>npx @mui/envinfo</code></summary>

```
  System:
    OS: macOS 12.5.1
  Binaries:
    Node: 16.18.0 - ~/.nvm/versions/node/v16.18.0/bin/node
    Yarn: 3.2.1 - ~/.nvm/versions/node/v16.18.0/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v16.18.0/bin/npm
  Browsers:
    Chrome: 107.0.5304.87
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.6.1
  npmPackages:
    @emotion/react: ^11.5.0 => 11.10.4 
    @emotion/styled: ^11.3.0 => 11.10.4 
    @mui/base:  5.0.0-alpha.96 
    @mui/core-downloads-tracker:  5.10.4 
    @mui/icons-material: ^5.10.3 => 5.10.3 
    @mui/material: ^5.10.4 => 5.10.4 
    @mui/private-theming:  5.10.3 
    @mui/styled-engine:  5.10.4 
    @mui/system:  5.10.4 
    @mui/types:  7.2.0 
    @mui/utils:  5.10.3 
    @mui/x-date-pickers:  5.0.5 
    @mui/x-date-pickers-pro: ^5.0.5 => 5.0.5 
    @mui/x-license-pro:  5.16.0 
    @types/react: 18.0.14 => 18.0.14 
    react: ~18 => 18.2.0 
    react-dom: ~18 => 18.2.0 
    typescript: 4.7.4 => 4.7.4 

```
</details>

<details>
<summary><code>npx tsc --showConfig</code></summary>

```json
{
  "compilerOptions": {
    "rootDir": "../..",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "resolveJsonModule": true,
    "importHelpers": true,
    "target": "es6",
    "module": "esnext",
    "lib": [
      "es2017",
      "dom"
    ],
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "baseUrl": "../..",
    "paths": {
      "@ds/carousel": [
        "libs/carousel/src/index.ts"
      ],
      "@ds/core": [
        "libs/ui/src/index.ts"
      ]
    },
    "jsx": "react-jsx",
    "jsxImportSource": "@emotion/react",
    "allowJs": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
  },
  "references": [
    {
      "path": "./tsconfig.lib.json"
    },
    {
      "path": "./tsconfig.spec.json"
    }
  ],
  "exclude": [
    "../../node_modules",
    "../../tmp"
  ]
}
```
</details>