React Material-UI: open dialog by button (in higher level) with createRef not working with using 'withMobileDialog'

Question

In my demo here https://codesandbox.io/s/zq833pq6o3 you can open one dialog(Child-Dialog) in two different ways.

1. by an button who is in this dialog (Button: OPEN BY THIS)
2. by an button from the parent level (Button: OPEN BY REF)

But the same case is not working with my Login-Dialog in the App-Bar. The difference between both cases is i'm using

import withMobileDialog from "@material-ui/core/withMobileDialog";

...

export default withMobileDialog()(LoginDialog);
// instead of normal way: export default LoginDialog;

in my Login-Dialog

1. Button: LOGIN => is working and open the Login-Dialog

2. Button: LOGIN REF => is not working and i get the error:

   TypeError _this.dialogRef.current.handleClickOpen is not a function

How can i fix the ref-Problem? By changing the export command?

the same problems are also by using of

export default withStyles(styles)(LoginForm); // instead of: export default LoginForm;

thanks!