const [open, setOpen] = useState(false);

const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  const theme = useTheme();
  const matches = useMediaQuery(theme.breakpoints.down("sm"));

  useEffect(() => {
    setOpen(matches);
  }, [matches]);

<Dialog
  open={open}
  onClose={handleClose}
  aria-labelledby="alert-dialog-title"
  aria-describedby="alert-dialog-description"
>
  <DialogTitle id="alert-dialog-title">
    {"Sorry for no mobile experience"}
  </DialogTitle>
  <DialogContent>
    <DialogContentText id="alert-dialog-description">
      Sorry, at this time this onboarding is best to be experienced on a
      desktop. But we{"'"}ll make the mobile version real soon.
    </DialogContentText>
  </DialogContent>
  <DialogActions>
    <Button onClick={handleClose} autoFocus>
      Okay
    </Button>
  </DialogActions>
</Dialog>