Typescript wrong type with Material-UI Higher Order Components - node.js

Question

I'm trying to update from Material-UI 1.x to Material-UI 3.9.2.
I had a few components, including the example below, that were working properly with Higher Order Components (HOC), but I have a hard time at migrating them to 3.9.2.
In this example, I reduced a problem and don't get why the typings are wrong (Typescript 3.3.3). It seems to me to be consistent with the way MUI PropInjector works.
Here is an example:
import { createStyles, Theme, withStyles, WithStyles } from '#material-ui/core';
import Dialog, { DialogProps } from '#material-ui/core/Dialog';
const styles = (theme: Theme) => createStyles({
defaultPaperWidthSm: {
backgroundColor: "#fafafa",
minWidth: 320,
maxWidth: 700
},
largePaperWidthSm: {
backgroundColor: "#fafafa",
width: 700,
maxWidth: 700,
[theme.breakpoints.up('md')]: {
minWidth: 900,
width: "unset",
maxWidth: "80vw",
}
}
})
export default withStyles(styles)(
function ResponsiveDialog(props: DialogProps & WithStyles<typeof styles>) {
let { classes, className, ...otherProps } = props
return <Dialog {...otherProps} />
}
)
Using it as a component:
<ResponsiveDialog open={true}>
<span>Blabla</span>
</ResponsiveDialog>
It returns this error, and I don't get why:
Type '{ children: Element; open: boolean; }' is not assignable to type 'IntrinsicAttributes & Pick & StyledComponentProps<"defaultPaperWidthSm" | "largePaperWidthSm"> & { children?: ReactNode; }'.
Property 'open' does not exist on type 'IntrinsicAttributes & Pick & StyledComponentProps<"defaultPaperWidthSm" | "largePaperWidthSm"> & { children?: ReactNode; }'.

Answer 1

Found it!
It's working if I use an arrow function:
export default withStyles(styles)(
(props: DialogProps & WithStyles<typeof styles>) => {
let { classes, className, ...otherProps } = props
return <Dialog {...otherProps} />
}
)
There are still issues when I combine multiple HOC, I have the feeling MUI typings are currently a bit broken. But it's another problem.