如何创建具有多个步骤的Modal？

import React, { useState } from 'react';
import { Modal, Button, Stepper, Step, StepLabel } from '@material-ui/core';

const steps = ['Step 1', 'Step 2', 'Step 3'];

function MultiStepModal({ open, onClose }) {
  const [activeStep, setActiveStep] = useState(0);

  const handleNext = () => {
    setActiveStep((prevActiveStep) => prevActiveStep + 1);
  };

  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  };

  return (
    <Modal open={open} onClose={onClose}>
      <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: 400, bgcolor: 'white', padding: 20 }}>
        <Stepper activeStep={activeStep}>
          {steps.map((label) => (
            <Step key={label}>
              <StepLabel>{label}</StepLabel>
            </Step>
          ))}
        </Stepper>
        <div>
          {activeStep === 0 && <p>Step 1 content</p>}
          {activeStep === 1 && <p>Step 2 content</p>}
          {activeStep === 2 && <p>Step 3 content</p>}
        </div>
        <div>
          {activeStep > 0 && (
            <Button onClick={handleBack}>Back</Button>
          )}
          {activeStep < steps.length - 1 ? (
            <Button onClick={handleNext}>Next</Button>
          ) : (
            <Button onClick={onClose}>Finish</Button>
          )}
        </div>
      </div>
    </Modal>
  );
}

export default MultiStepModal;