material-ui: Using a styled(Grid) results in an error from 'RegularBreakpoints'

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

import { styled, Grid } from '@mui/material';

export const StyledGrid = styled(Grid)(({ theme }) => ({}));

Doing the above is resulting in the following error Exported variable 'StyledGrid' has or is using name 'RegularBreakpoints' from external module "{project_path}/node_modules/@mui/material/Grid/Grid" but cannot be named.

Expected behavior 🤔

If I export RegularBreakpoints the error goes away so I’d expect that or a similar solution.

Steps to reproduce 🕹

Steps:

1. Create a project with 5.8.4 of @mui/material
2. Create a file in the project that has the following code:

import { styled, Grid } from '@mui/material';

export const StyledGrid = styled(Grid)(({ theme }) => ({}));

Context 🔦

No response

Your environment 🌎

.tsconfig

{
  "compilerOptions": {
    "target": "ES2015",
    "outDir": "./dist/esm/",
    "strictNullChecks": true,
    "moduleResolution": "node",
    "allowJs": true,
    "strict": true,
    "esModuleInterop": true,
    "jsx": "react",
    "baseUrl": "./src",
    "lib": ["es2015", "dom.iterable", "es2016.array.include", "es2017.object", "dom", "esnext"],
    "module": "ESNext",
    "removeComments": true,
    "alwaysStrict": true,
    "allowUnreachableCode": false,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "forceConsistentCasingInFileNames": true,
    "importHelpers": true,
    "sourceMap": true,
    "declaration": true,
    "declarationDir": "./dist/typings/",
    "downlevelIteration": true,
    "typeRoots": ["./src/typings", "./node_modules/@types", "../../node_modules/@types"],
    "types": ["jest", "node"],
    "skipLibCheck": true
  },
  "files": ["./src/index.tsx"],
  "include": ["./src/**/*"]
}