我想在单击按钮react js material ui后显示代码片段

import React, { useState } from 'react';
import { Button, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions } from '@material-ui/core';

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

const handleClick = () => {
  setOpen(true);
};

<Button variant="contained" color="primary" onClick={handleClick}>
  点击显示代码片段
</Button>

<Dialog open={open} onClose={() => setOpen(false)}>
  <DialogTitle>代码片段</DialogTitle>
  <DialogContent>
    <DialogContentText>
      这里是你的代码片段
    </DialogContentText>
  </DialogContent>
  <DialogActions>
    <Button onClick={() => setOpen(false)} color="primary">
      关闭
    </Button>
  </DialogActions>
</Dialog>